<template>
  <view class="pet-settings-container">
    <!-- 页面头部 -->
    <view class="page-header">
      <view class="header-card">
        <text class="page-title">🐾 宠物设置</text>
        <text class="page-subtitle">管理你的可爱宠物</text>
      </view>
    </view>


    <!-- Tab 切换组件 -->
    <view class="tab-container">
      <!-- Tab 内容区域 -->
      <view class="tab-content">
        <!-- 基础设置 Tab -->
        <view v-if="activeTab === 'basic'" class="tab-pane">
          <view class="settings-card">
            <text class="card-title">宠物基础设置</text>
            
            <view class="setting-row">
              <text class="setting-label">名称</text>
              <input 
                class="compact-input"
                v-model="petData.name"
                placeholder="宠物名称"
                @blur="updatePetName"
              />
            </view>
            
            <view class="setting-row">
              <text class="setting-label">外观</text>
              <view class="emoji-selector-compact">
                <view 
                  v-for="emoji in availableEmojis.slice(0, 5)" 
                  :key="emoji"
                  class="emoji-option-compact"
                  :class="{ 'selected': petData.emoji === emoji }"
                  @click="selectEmoji(emoji)"
                >
                  <text class="emoji">{{ emoji }}</text>
                </view>
                <view class="more-emojis" @click="showAllEmojis">⋯</view>
                </view>
            </view>
            
            <view class="setting-row">
              <text class="setting-label">显示宠物</text>
              <switch 
                :checked="petData.isActive"
                @change="togglePetVisibility"
                color="#667eea"
              />
            </view>
          </view>
        </view>
        
        <!-- 交互设置 Tab -->
        <view v-if="activeTab === 'interaction'" class="tab-pane">
          <view class="settings-card">
            <text class="card-title">交互功能设置</text>
            
            <view class="setting-row">
              <text class="setting-label">气泡显示</text>
              <switch 
                :checked="petSettings.showBubbles"
                @change="toggleShowBubbles"
                color="#667eea"
              />
            </view>
            
            <view class="setting-row">
              <text class="setting-label">语音识别</text>
              <switch 
                :checked="petSettings.voiceRecognition"
                @change="toggleVoiceRecognition"
                color="#667eea"
              />
            </view>
            
            <view class="setting-row">
              <text class="setting-label">音效开关</text>
              <switch 
                :checked="petSettings.soundEnabled"
                @change="toggleSound"
                color="#667eea"
              />
            </view>
          </view>
        </view>
        
        <!-- 自动化设置 Tab -->
        <view v-if="activeTab === 'automation'" class="tab-pane">
          <!-- 自动化子Tab -->
          <view class="automation-tabs">
            <view 
              class="automation-tab-item"
              :class="{ 'active': automationSubTab === 'packages' }"
              @click="switchAutomationSubTab('packages')"
            >
              <text class="tab-item-icon">🎁</text>
              <text class="tab-item-text">套餐</text>
            </view>
            <view 
              class="automation-tab-item"
              :class="{ 'active': automationSubTab === 'individual' }"
              @click="switchAutomationSubTab('individual')"
            >
              <text class="tab-item-icon">⚙️</text>
              <text class="tab-item-text">单独开启</text>
            </view>
          </view>
          
          <!-- 套餐内容 -->
          <view v-if="automationSubTab === 'packages'" class="automation-content">
            <view v-if="currentPackage && !currentPackage.isExpired" class="current-package-banner">
              <view class="banner-left">
                <text class="banner-icon">✨</text>
                <view class="banner-info">
                  <text class="banner-title">{{ currentPackage.config.name }}</text>
                  <text class="banner-time">剩余: {{ formatPackageTime(currentPackage.remainingTime) }}</text>
                </view>
              </view>
              <view class="banner-badge">生效中</view>
            </view>
            
            <view class="package-grid">
              <view 
                v-for="(pkg, key) in automationPackages" 
                :key="key"
                class="package-card"
                :class="{ 'active': currentPackage && currentPackage.type === key && !currentPackage.isExpired }"
                @click="purchasePackage(key, pkg)"
              >
                <view class="package-card-header">
                  <text class="package-card-name">{{ pkg.name }}</text>
                  <view class="package-card-price-box">
                    <text class="package-card-price">{{ pkg.price }}</text>
                    <text class="package-card-unit">金币</text>
                  </view>
                </view>
                
                <view class="package-card-duration">
                  <text class="duration-icon">⏱️</text>
                  <text class="duration-text">24小时</text>
                </view>
                
                <view class="package-card-features">
                  <text 
                    class="feature-tag" 
                    v-for="feature in pkg.features.slice(0, 3)" 
                    :key="feature"
                  >
                    {{ getFeatureName(feature) }}
                  </text>
                  <text v-if="pkg.features.length > 3" class="feature-more">
                    +{{ pkg.features.length - 3 }}项
                  </text>
                </view>
                
                <view class="package-card-btn">
                  <text class="btn-text">{{ currentPackage && currentPackage.type === key && !currentPackage.isExpired ? '已购买' : '立即购买' }}</text>
                </view>
              </view>
            </view>
            
            <view class="automation-tips">
              <text class="tips-icon">💡</text>
              <text class="tips-text">套餐比单独购买更划算！一次购买，24小时无限次使用。</text>
            </view>
          </view>
          
          <!-- 单独开启内容 -->
          <view v-if="automationSubTab === 'individual'" class="automation-content">
            <view class="settings-card">
              <text class="card-title">单独开启自动化</text>
              <text class="card-subtitle">每次触发需消耗金币</text>
            
            <view class="setting-row">
              <view class="setting-info">
                <text class="setting-label">自动喂食</text>
                <text class="setting-cost">{{ automationCosts.autoFeed }} 金币/次</text>
              </view>
              <switch 
                :checked="petSettings.autoFeed"
                @change="toggleAutoFeed"
                color="#667eea"
              />
            </view>
            
            <view class="setting-row">
              <view class="setting-info">
                <text class="setting-label">自动玩耍</text>
                <text class="setting-cost">{{ automationCosts.autoPlay }} 金币/次</text>
              </view>
              <switch 
                :checked="petSettings.autoPlay"
                @change="toggleAutoPlay"
                color="#667eea"
              />
            </view>
            
            <view class="setting-row">
              <view class="setting-info">
                <text class="setting-label">自动休息</text>
                <text class="setting-cost">{{ automationCosts.autoRest }} 金币/次</text>
              </view>
              <switch 
                :checked="petSettings.autoRest"
                @change="toggleAutoRest"
                color="#667eea"
              />
            </view>
            
            <view class="setting-row">
              <view class="setting-info">
                <text class="setting-label">自动清洁</text>
                <text class="setting-cost">{{ automationCosts.autoClean }} 金币/次</text>
              </view>
              <switch 
                :checked="petSettings.autoClean"
                @change="toggleAutoClean"
                color="#667eea"
              />
            </view>
            
            <view class="setting-row">
              <view class="setting-info">
                <text class="setting-label">自动治疗</text>
                <text class="setting-cost">{{ automationCosts.autoHeal }} 金币/次</text>
              </view>
              <switch 
                :checked="petSettings.autoHeal"
                @change="toggleAutoHeal"
                color="#667eea"
              />
            </view>
            
            <view class="setting-row">
              <view class="setting-info">
                <text class="setting-label">自动提升心情</text>
                <text class="setting-cost">{{ automationCosts.autoMoodBoost }} 金币/次</text>
              </view>
              <switch 
                :checked="petSettings.autoMoodBoost"
                @change="toggleAutoMoodBoost"
                color="#667eea"
              />
            </view>
            
              <view class="automation-tips">
                <text class="tips-icon">💡</text>
                <text class="tips-text">开启自动化功能后，当触发条件满足时会自动执行并扣除对应金币。购买套餐更划算！</text>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 成就与统计 Tab -->
        <view v-if="activeTab === 'stats'" class="tab-pane stats-tab-pane">
          <!-- 宠物统计（固定在顶部） -->
          <view class="stats-card stats-fixed-header">
            <text class="card-title">宠物统计</text>
            
            <view class="stats-grid">
              <view class="stat-item">
                <text class="stat-icon">🎂</text>
                <text class="stat-label">年龄</text>
                <text class="stat-value">{{ petData.age || 1 }}天</text>
              </view>
              
              <view class="stat-item">
                <text class="stat-icon">⭐</text>
                <text class="stat-label">经验</text>
                <text class="stat-value">{{ petData.exp || 0 }}/{{ petData.maxExp || 100 }}</text>
              </view>
                
              <view class="stat-item">
                <text class="stat-icon">🏆</text>
                <text class="stat-label">成就</text>
                <text class="stat-value">{{ achievementStats.unlocked }}/{{ achievementStats.total }}</text>
              </view>
                
              <view class="stat-item">
                <text class="stat-icon">💝</text>
                <text class="stat-label">互动</text>
                <text class="stat-value">{{ petData.interactionCount || 0 }}次</text>
              </view>
            </view>
            
            <!-- 成就进度条 -->
            <view class="achievement-progress-bar">
              <view class="progress-bar-container">
                <view class="progress-bar-fill" :style="{ width: achievementStats.progress + '%' }"></view>
              </view>
              <text class="progress-text">成就完成度: {{ achievementStats.progress }}%</text>
            </view>
          </view>
          
          <!-- 成就分类Tab（固定） -->
          <view class="achievement-tabs-section achievement-tabs-fixed">
            <view class="achievement-tabs-scroll">
              <view 
                v-for="cat in achievementCategories" 
                :key="cat.id"
                class="achievement-category-tab"
                :class="{ 'active': achievementActiveCategory === cat.id }"
                @click="switchAchievementCategory(cat.id)"
              >
                <text class="category-icon">{{ cat.icon }}</text>
                <text class="category-name">{{ cat.name }}</text>
                <text class="category-progress">{{ getCategoryProgress(cat.id) }}</text>
              </view>
            </view>
          </view>
          
          <!-- 成就列表（可滚动区域） -->
          <scroll-view class="achievements-scroll-view" scroll-y>
            <view class="achievements-list-section">
              <view 
                v-for="achievement in currentCategoryAchievements" 
                :key="achievement.id"
                class="achievement-card"
                :class="{ 'unlocked': achievement.unlocked, 'locked': !achievement.unlocked }"
              >
                <view class="achievement-icon-wrapper">
                  <text class="achievement-icon">{{ achievement.icon }}</text>
                  <view v-if="achievement.unlocked" class="unlocked-badge">✓</view>
                </view>
                <view class="achievement-info">
                  <text class="achievement-name">{{ achievement.name }}</text>
                  <text class="achievement-description">{{ achievement.description }}</text>
                  <text class="achievement-requirement">{{ achievement.requirement }}</text>
                </view>
              </view>
              
              <view v-if="currentCategoryAchievements.length === 0" class="empty-achievements">
                <text class="empty-icon">📭</text>
                <text class="empty-text">该分类暂无成就</text>
              </view>
            </view>
          </scroll-view>
        </view>
        
        <!-- 金币玩法 Tab -->
        <view v-if="activeTab === 'gold'" class="tab-pane">
          <!-- 战斗区域 -->
          <view class="battle-arena">
            <!-- 标题栏 -->
            <view class="arena-header">
              <text class="arena-title">⚔️ 战斗竞技场</text>
              <!-- 波次显示 -->
              <view class="wave-display">
                <text class="wave-text">第 {{ currentWave }} 波</text>
                <text class="wave-progress">{{ waveEnemyCount }}/{{ isBossBattle ? 10 : enemiesPerWave }}</text>
              </view>
              <view class="arena-header-right">
                <!-- 战力显示 -->
                <view class="battle-power-display">
                  <text class="power-label">战力</text>
                  <text class="power-value">{{ battlePower }}</text>
                </view>
                <!-- 其他统计 -->
                <view class="arena-stats">
                  <view class="arena-stat-item">
                    <text class="arena-stat-value">{{ currentGold }}</text>
                    <text class="arena-stat-label">💰</text>
                  </view>
                  <view class="arena-stat-divider"></view>
                  <view class="arena-stat-item">
                    <text class="arena-stat-value">{{ todayGold + battleGoldEarned }}</text>
                    <text class="arena-stat-label">📈</text>
                  </view>
                  <view class="arena-stat-divider"></view>
                  <view class="arena-stat-item">
                    <text class="arena-stat-value-small">{{ formatTime(runTime) }}</text>
                    <text class="arena-stat-label">⏰</text>
                  </view>
                </view>
              </view>
            </view>
            
            <!-- 战斗场景 -->
            <view class="battle-scene">
              <!-- 宠物角色 -->
              <view class="battle-pet" :class="{ 'attacking': isPetAttacking, 'hit': isPetHit }">
                <!-- 经验获得特效 -->
                <view class="pet-battle-effects" v-if="showExpGain">
                  <text class="exp-gain-text">+{{ expGain }} EXP</text>
                </view>
                
                <!-- 宠物受伤效果 -->
                <view class="pet-damage-effects" v-if="showPetDamage">
                  <text class="pet-damage-text">{{ petDamageText }}</text>
                </view>
                
                <text class="pet-character">{{ petData.emoji || '🐱' }}</text>
                <view class="pet-status-bars">
                  <!-- 血条 -->
                  <view class="pet-hp-bar">
                    <view class="hp-fill" :style="{ width: (petData.health || 100) + '%' }"></view>
                  </view>
                  <!-- 经验条 -->
                  <view class="pet-exp-bar">
                    <view class="exp-fill" :style="{ width: ((petData.exp || 0) / (petData.maxExp || 100) * 100) + '%' }"></view>
                  </view>
                </view>
                <text class="pet-level-badge">Lv.{{ petData.level || 1 }}</text>
                <text class="pet-exp-text">{{ petData.exp || 0 }}/{{ petData.maxExp || 100 }}</text>
              </view>
              
              <!-- VS 标识 -->
              <view class="vs-badge">VS</view>
              
              <!-- 敌人 -->
              <view class="battle-enemy" :class="{ 'hit': isEnemyHit, 'defeated': isEnemyDefeated, 'boss': currentEnemy.isBoss, 'attacking': isEnemyAttacking }" v-if="!isEnemyDefeated">
                <!-- 战斗效果（敌人上方） -->
                <view class="enemy-battle-effects">
                  <text v-if="showDamage" class="damage-text" :class="{ 'critical': isCritical }">
                    {{ damageText }}
                  </text>
                  <text v-if="showGoldReward" class="gold-reward-text">
                    +{{ goldReward }} 💰
                  </text>
                </view>
                
                <!-- BOSS皇冠（敌人上方） -->
                <text v-if="currentEnemy.isBoss" class="boss-crown">{{ currentEnemy.crown || '👑' }}</text>
                
                <text class="enemy-character" :class="{ 'boss-character': currentEnemy.isBoss }">{{ currentEnemy.icon }}</text>
                <view class="enemy-hp-container">
                  <view class="enemy-hp-bar" :class="{ 'boss-hp': currentEnemy.isBoss }">
                    <view class="hp-fill enemy" :style="{ width: enemyHp + '%' }"></view>
                  </view>
                  <text class="enemy-hp-text">{{ Math.floor(enemyHp) }}%</text>
                </view>
                <view class="enemy-info">
                  <text class="enemy-name" :class="{ 'boss-name': currentEnemy.isBoss }">{{ currentEnemy.name }}</text>
                  <text class="enemy-level" :class="{ 'boss-level': currentEnemy.isBoss }">Lv.{{ enemyPowerLevel }}</text>
                </view>
              </view>
            </view>
            
            <!-- 战斗日志 -->
            <view class="battle-log-container">
              <view 
                v-for="(log, index) in battleLogs" 
                :key="log.id"
                class="battle-log-item"
                :class="{ 'log-enter': log.isNew }"
                :style="{ '--delay': index * 0.1 + 's' }"
              >
                <text class="log-icon">{{ log.icon }}</text>
                <text class="log-text" :class="{ 'log-boss': log.isBoss, 'log-special': log.isSpecial }">{{ log.message }}</text>
              </view>
              <view v-if="battleLogs.length === 0" class="log-empty">
                <text class="log-empty-text">等待战斗开始...</text>
              </view>
            </view>
            
            <!-- 战斗统计 -->
            <view class="battle-stats">
              <view class="stat-item-small">
                <text class="stat-icon">👹</text>
                <text class="stat-text">击败: {{ defeatedCount }}</text>
              </view>
              <view class="stat-item-small">
                <text class="stat-icon">💰</text>
                <text class="stat-text">获得: {{ battleGoldEarned }}</text>
              </view>
              <view class="stat-item-small">
                <text class="stat-icon">⚡</text>
                <text class="stat-text">强化: Lv.{{ enemyPowerLevel }}</text>
              </view>
            </view>
            
            <!-- 战斗控制 -->
            <view class="battle-controls">
              <view class="control-btn attack-btn" @click="manualAttack">
                <text class="btn-icon">⚔️</text>
                <text class="btn-text">攻击</text>
              </view>
              <view class="control-btn" :class="{ 'active': autoBattleEnabled }" @click="toggleAutoBattle">
                <text class="btn-icon">🤖</text>
                <text class="btn-text">{{ autoBattleEnabled ? '自动中' : '自动战斗' }}</text>
              </view>
            </view>
          </view>
          
          <!-- 升级属性 -->
          <view class="upgrade-section">
            <view class="upgrade-header">
              <text class="section-title">🔧 属性升级</text>
              <view class="upgrade-tabs">
                <view 
                  class="upgrade-tab" 
                  :class="{ 'active': upgradeActiveTab === 'battle' }"
                  @click="upgradeActiveTab = 'battle'"
                >
                  <text class="upgrade-tab-text">⚔️ 战斗</text>
                </view>
                <view 
                  class="upgrade-tab" 
                  :class="{ 'active': upgradeActiveTab === 'pet' }"
                  @click="upgradeActiveTab = 'pet'"
                >
                  <text class="upgrade-tab-text">🐱 宠物</text>
                </view>
              </view>
            </view>
            
            <!-- 战斗属性 -->
            <view class="upgrade-list" v-if="upgradeActiveTab === 'battle'">
              <view 
                v-for="attr in battleAttributes" 
                :key="attr.id"
                class="upgrade-item"
              >
                <view class="upgrade-info">
                  <text class="upgrade-icon">{{ attr.icon }}</text>
                  <view class="upgrade-details">
                    <text class="upgrade-name">{{ attr.name }} Lv.{{ attr.level }}</text>
                    <text class="upgrade-desc">{{ attr.description }}</text>
                    <view class="upgrade-value-row">
                      <text class="upgrade-current-value">当前: {{ getAttributeValue(attr) }}</text>
                      <text class="upgrade-next-value">{{ getAttributeNextValue(attr) }}</text>
                    </view>
                  </view>
                </view>
                <view class="upgrade-action">
                  <text class="upgrade-cost" v-if="!attr.maxLevel || attr.level < attr.maxLevel">{{ attr.cost }} 💰</text>
                  <text class="upgrade-cost max-level" v-else>已满级</text>
                  <view 
                    class="upgrade-btn" 
                    :class="{ 'disabled': currentGold < attr.cost || (attr.maxLevel && attr.level >= attr.maxLevel) }"
                    @click="upgradeAttribute(attr.id)"
                  >
                    <text class="upgrade-btn-text">{{ attr.maxLevel && attr.level >= attr.maxLevel ? '满级' : '升级' }}</text>
                  </view>
                </view>
              </view>
            </view>
            
            <!-- 宠物属性提升 -->
            <view class="upgrade-list" v-if="upgradeActiveTab === 'pet'">
              <view class="pet-upgrade-tip">
                <text class="tip-icon">💡</text>
                <text class="tip-text">通过战斗可以提升宠物的各项能力！</text>
              </view>
              
              <view class="pet-stat-item">
                <view class="stat-icon-wrapper">
                  <text class="stat-icon">❤️</text>
                </view>
                <view class="stat-info">
                  <text class="stat-name">最大生命值</text>
                  <text class="stat-desc">提升宠物的健康上限</text>
                  <view class="stat-progress">
                    <text class="stat-value">当前: 100</text>
                  </view>
                </view>
              </view>
              
              <view class="pet-stat-item">
                <view class="stat-icon-wrapper">
                  <text class="stat-icon">⚡</text>
                </view>
                <view class="stat-info">
                  <text class="stat-name">精力值</text>
                  <text class="stat-desc">精力充足才能持续战斗</text>
                  <view class="stat-progress">
                    <view class="energy-bar">
                      <view class="energy-fill" :style="{ width: (petData.energy || 0) + '%' }"></view>
                    </view>
                    <text class="stat-value">{{ petData.energy || 0 }}%</text>
                  </view>
                </view>
              </view>
              
              <view class="pet-stat-item">
                <view class="stat-icon-wrapper">
                  <text class="stat-icon">⭐</text>
                </view>
                <view class="stat-info">
                  <text class="stat-name">经验值</text>
                  <text class="stat-desc">击败敌人获得经验升级</text>
                  <view class="stat-progress">
                    <view class="exp-bar-detail">
                      <view class="exp-fill-detail" :style="{ width: ((petData.exp || 0) / (petData.maxExp || 100) * 100) + '%' }"></view>
                    </view>
                    <text class="stat-value">{{ petData.exp || 0 }}/{{ petData.maxExp || 100 }}</text>
                  </view>
                </view>
              </view>
              
              <view class="pet-stat-item">
                <view class="stat-icon-wrapper">
                  <text class="stat-icon">😊</text>
                </view>
                <view class="stat-info">
                  <text class="stat-name">心情值</text>
                  <text class="stat-desc">心情好能提高战斗表现</text>
                  <view class="stat-progress">
                    <view class="mood-bar">
                      <view class="mood-fill" :style="{ width: (petData.mood || 0) + '%' }"></view>
                    </view>
                    <text class="stat-value">{{ petData.mood || 0 }}%</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- Tab 标签栏 - 移动到底部 -->
      <view class="tabs bottom-tabs">
        <view 
          v-for="(tab, index) in tabs" 
          :key="tab.id"
          class="tab"
          :class="{ 'active': activeTab === tab.id }"
          @click="switchTab(tab.id)"
        >
          <text class="tab-icon">{{ tab.icon }}</text>
          <text class="tab-text">{{ tab.name }}</text>
        </view>
      </view>
    </view>
    
    <!-- 成就弹窗 -->
    <view class="achievement-modal" v-if="showAchievementsModal" @click="closeAchievementsModal">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">🏆 全部成就</text>
          <view class="modal-close" @click="closeAchievementsModal">×</view>
        </view>
        <view class="modal-body">
          <view class="achievements-list">
            <view 
              v-for="achievement in achievementList" 
              :key="achievement.id"
              class="achievement-modal-item"
            >
              <text class="achievement-modal-icon">{{ getAchievementIcon(achievement.type) }}</text>
              <view class="achievement-modal-info">
                <text class="achievement-modal-name">{{ achievement.name }}</text>
                <text class="achievement-modal-desc">{{ achievement.description || '恭喜获得此成就！' }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
  </view>
</template>

<script>
import desktopPetManager from '@/utils/desktop-pet-manager.js'
import goldManager from '@/utils/gold-manager.js'

export default {
  name: 'PetSettings',
  data() {
    return {
      petData: {},
      petSettings: {},
      availableEmojis: ['🐱', '🐶', '🐰', '🐸', '🐧', '🦊', '🐨', '🐼', '🦄', '🐙'],
      isLoading: false,
      showAchievementsModal: false,
      // Tab配置
      tabs: [
        { id: 'gold', name: '金币玩法', icon: '💰' },
        { id: 'basic', name: '基础设置', icon: '⚙️' },
        { id: 'interaction', name: '交互设置', icon: '💬' },
        { id: 'automation', name: '自动化', icon: '🤖' },
        { id: 'stats', name: '统计与成就', icon: '📊' },
        
      ],
      activeTab: 'basic', // 默认选中基础设置
      // 金币相关
      currentGold: 0,
      todayGold: 0,
      runTime: 0, // 运行时间（秒）
      goldTimer: null,
      timeTimer: null,
      isGoldIncreasing: false,
      showGoldAnimation: false,
      lastGoldUpdateTime: null,
      // 自动化相关
      automationCosts: {},
      automationPackages: {},
      currentPackage: null,
      automationSubTab: 'packages', // 自动化子Tab，默认显示套餐
      lastActiveTab: null, // 上次选择的Tab
      // 成就相关
      achievementStats: {
        total: 0,
        unlocked: 0,
        progress: 0,
        categories: {}
      },
      achievementActiveCategory: 'all', // 当前选择的成就分类
      achievementCategories: [
        { id: 'all', name: '全部', icon: '🌟' },
        { id: 'basic', name: '互动', icon: '👋' },
        { id: 'level', name: '等级', icon: '⭐' },
        { id: 'status', name: '状态', icon: '💯' },
        { id: 'care', name: '照顾', icon: '💝' },
        { id: 'automation', name: '自动化', icon: '🤖' },
        { id: 'time', name: '时间', icon: '⏰' },
        { id: 'special', name: '特殊', icon: '🌈' }
      ],
      allAchievements: [],
      // 战斗系统
      enemyHp: 100,
      currentEnemy: { name: '史莱姆', icon: '👾', hp: 50, reward: 5 },
      enemies: [
        { name: '史莱姆', icon: '👾', hp: 50, reward: 5, level: 1 },
        { name: '哥布林', icon: '👺', hp: 80, reward: 8, level: 2 },
        { name: '骷髅', icon: '💀', hp: 120, reward: 12, level: 3 },
        { name: '兽人', icon: '👹', hp: 150, reward: 15, level: 4 },
        { name: '巨魔', icon: '🧟', hp: 200, reward: 20, level: 5 },
        { name: '恶魔', icon: '😈', hp: 300, reward: 30, level: 6 },
        { name: '龙', icon: '🐉', hp: 500, reward: 50, level: 7 }
      ],
      bosses: [
        { name: '史莱姆王', icon: '👾', crown: '👑', hp: 300, reward: 50 },
        { name: '哥布林领主', icon: '👺', crown: '👑', hp: 500, reward: 100 },
        { name: '骷髅王', icon: '💀', crown: '👑', hp: 800, reward: 150 },
        { name: '兽人酋长', icon: '👹', crown: '👑', hp: 1200, reward: 250 },
        { name: '巨魔霸主', icon: '🧟', crown: '👑', hp: 1800, reward: 400 },
        { name: '恶魔君主', icon: '😈', crown: '👑', hp: 2500, reward: 600 },
        { name: '远古魔龙', icon: '🐉', crown: '👑', hp: 4000, reward: 1000 }
      ],
      defeatedCount: 0,
      currentWave: 1, // 当前波次
      waveEnemyCount: 0, // 当前波次击败的敌人数
      enemiesPerWave: 9, // 每波小怪数量（第10个是BOSS）
      bossStage: 0, // 当前BOSS关卡（0表示还未遇到BOSS）
      isBossBattle: false, // 是否正在BOSS战
      enemyPowerLevel: 1, // 敌人强化等级
      battleGoldEarned: 0,
      comboCount: 0,
      autoBattleEnabled: false,
      battleTimer: null,
      isPetAttacking: false,
      isEnemyHit: false,
      isEnemyDefeated: false,
      isEnemyAttacking: false, // 敌人正在攻击
      showDamage: false,
      damageText: '',
      isCritical: false,
      showGoldReward: false,
      goldReward: 0,
      showExpGain: false,
      expGain: 0,
      showPetDamage: false, // 宠物受到伤害
      petDamageText: '',
      isPetHit: false, // 宠物被击中
      // 战斗日志
      battleLogs: [],
      maxLogs: 2, // 最多显示2条日志
      // 属性升级Tab
      upgradeActiveTab: 'battle', // battle: 战斗属性, pet: 宠物属性
      // 战斗属性（无等级上限）
      battleAttributes: [
        { 
          id: 'attack', 
          name: '攻击力', 
          icon: '⚔️', 
          description: '增加每次攻击伤害', 
          level: 1, 
          cost: 50,
          baseValue: 10,
          costMultiplier: 1.3 // 成本倍增系数
        },
        { 
          id: 'critRate', 
          name: '暴击率', 
          icon: '💥', 
          description: '提升暴击几率', 
          level: 1, 
          cost: 80,
          baseValue: 5,
          costMultiplier: 1.35
        },
        { 
          id: 'critDamage', 
          name: '暴击伤害', 
          icon: '💢', 
          description: '提升暴击时的伤害倍数', 
          level: 1, 
          cost: 100,
          baseValue: 2.0, // 基础2倍暴击伤害
          costMultiplier: 1.4
        },
        { 
          id: 'speed', 
          name: '攻击间隔', 
          icon: '⚡', 
          description: '缩短攻击等待时间', 
          level: 1, 
          cost: 100,
          baseValue: 0, // 基础0%缩短
          maxLevel: 50, // 最高50级，最多缩短49.5%
          costMultiplier: 1.4
        },
        { 
          id: 'defense', 
          name: '防御力', 
          icon: '🛡️', 
          description: '减少受到的伤害', 
          level: 1, 
          cost: 90,
          baseValue: 0,
          maxLevel: 30, // 最高30级，最多29%减伤
          costMultiplier: 1.35
        },
        { 
          id: 'lifeSteal', 
          name: '生命偷取', 
          icon: '❤️‍🩹', 
          description: '攻击时恢复生命值', 
          level: 1, 
          cost: 150,
          baseValue: 0, // 基础0%
          maxLevel: 25, // 最高25级，最多24%吸血
          costMultiplier: 1.5
        },
        { 
          id: 'goldBonus', 
          name: '金币加成', 
          icon: '💰', 
          description: '增加战斗金币收益', 
          level: 1, 
          cost: 120,
          baseValue: 0,
          maxLevel: 100, // 金币加成可以升级更高
          costMultiplier: 1.5
        },
        { 
          id: 'expBonus', 
          name: '经验加成', 
          icon: '📚', 
          description: '增加战斗经验收益', 
          level: 1, 
          cost: 130,
          baseValue: 0,
          maxLevel: 100, // 经验加成可以升级更高
          costMultiplier: 1.45
        }
      ]
    }
  },
  
  computed: {
    petStatus() {
      return desktopPetManager.getPetStatusDescription()
    },
    
    // 计算总战力
    battlePower() {
      let power = 0
      
      this.battleAttributes.forEach(attr => {
        if (attr.id === 'attack') {
          // 攻击力直接加算
          power += attr.baseValue + (attr.level - 1) * 5
        } else if (attr.id === 'critRate') {
          // 暴击率按百分比转换
          const critRate = attr.baseValue + (attr.level - 1) * 0.5
          power += critRate * 2 // 每0.5%暴击率 = 1战力
        } else if (attr.id === 'critDamage') {
          // 暴击伤害
          const critDmg = attr.baseValue + (attr.level - 1) * 0.01
          power += (critDmg - 2.0) * 500 // 超过2.0倍的部分，每0.01倍 = 5战力
        } else if (attr.id === 'speed') {
          // 攻击间隔缩短：每1%缩短 = 10战力
          const speedReduction = (attr.level - 1) * 1
          power += speedReduction * 10
        } else if (attr.id === 'defense') {
          // 防御力
          const defense = (attr.level - 1) * 1
          power += defense * 6 // 每1%防御 = 6战力
        } else if (attr.id === 'lifeSteal') {
          // 生命偷取
          const lifeSteal = (attr.level - 1) * 1
          power += lifeSteal * 3 // 每1%吸血 = 3战力
        } else if (attr.id === 'goldBonus') {
          // 金币加成转换为战力
          const goldBonus = (attr.level - 1) * 2
          power += goldBonus * 0.5 // 每2%金币加成 = 1战力
        } else if (attr.id === 'expBonus') {
          // 经验加成
          const expBonus = (attr.level - 1) * 2
          power += expBonus * 0.3 // 每2%经验加成 = 0.6战力
        }
      })
      
      // 宠物等级加成
      power += (this.petData.level || 1) * 10
      
      return Math.floor(power)
    },
    
    // 缓存成就列表数据，避免重复计算
    achievementList() {
      return this.petData.achievements || []
    },
    
    // 缓存预览成就
    previewAchievements() {
      return this.achievementList.slice(0, 3)
    },
    
    // 缓存成就数量
    achievementCount() {
      return this.achievementList.length
    },
    
    // 当前分类的成就
    currentCategoryAchievements() {
      if (this.achievementActiveCategory === 'all') {
        return this.allAchievements
      }
      return this.allAchievements.filter(a => a.category === this.achievementActiveCategory)
    }
  },
  
  onLoad() {
    this.loadPetData()
    this.setupEventListeners()
    this.initGoldSystem()
    this.loadAutomationData()
    this.loadAchievementData() // 加载成就数据
    this.loadBattleData() // 加载战斗数据
    this.loadLastActiveTab() // 加载上次选择的Tab
  },

  onShow() {
    // 页面显示时不再重新加载数据，避免性能开销
    // 数据更新通过事件监听器处理
    this.startGoldTimer()
  },

  onHide() {
    // 页面隐藏时停止计时器，但保存自动战斗状态
    this.stopGoldTimer()
    this.saveBattleData()
  },

  onUnload() {
    this.removeEventListeners()
    this.stopGoldTimer()
    this.stopBattle()
    this.saveBattleData() // 页面卸载前保存战斗状态
  },
  
  methods: {
    // 获取属性当前值的显示文本
    getAttributeValue(attr) {
      switch(attr.id) {
        case 'attack':
          // 攻击力：基础值 + (等级-1) * 5
          const attackValue = attr.baseValue + (attr.level - 1) * 5
          return `${attackValue} 点`
          
        case 'critRate':
          // 暴击率：基础5% + (等级-1) * 0.5%（更精细的增长）
          const critRate = attr.baseValue + (attr.level - 1) * 0.5
          return `${critRate.toFixed(3)}%`
          
        case 'critDamage':
          // 暴击伤害：基础2.0x + (等级-1) * 0.01x（更精细）
          const critDmg = attr.baseValue + (attr.level - 1) * 0.01
          return `${critDmg.toFixed(2)}x`
          
        case 'speed':
          // 攻击间隔：(等级-1) * 1%缩短（渐进式增长）
          const speedReduction = (attr.level - 1) * 1
          return `-${speedReduction.toFixed(3)}%`
          
        case 'defense':
          // 防御力：(等级-1) * 1%
          const defense = (attr.level - 1) * 1
          return `${defense.toFixed(3)}%`
          
        case 'lifeSteal':
          // 生命偷取：(等级-1) * 1%
          const lifeSteal = (attr.level - 1) * 1
          return `${lifeSteal.toFixed(3)}%`
          
        case 'goldBonus':
          // 金币加成：(等级-1) * 2%（降低增幅）
          const goldBonus = (attr.level - 1) * 2
          return `+${goldBonus.toFixed(3)}%`
          
        case 'expBonus':
          // 经验加成：(等级-1) * 2%（降低增幅）
          const expBonus = (attr.level - 1) * 2
          return `+${expBonus.toFixed(3)}%`
          
        default:
          return `Lv.${attr.level}`
      }
    },
    
    // 获取属性下次升级增加的值
    getAttributeNextValue(attr) {
      // 检查是否已达到最大等级
      if (attr.maxLevel && attr.level >= attr.maxLevel) {
        return '已满级'
      }
      
      switch(attr.id) {
        case 'attack':
          return '+5 点'
          
        case 'critRate':
          return '+0.500%'
          
        case 'critDamage':
          return '+0.01x'
          
        case 'speed':
          return '-1.000%'
          
        case 'defense':
          return '+1.000%'
          
        case 'lifeSteal':
          return '+1.000%'
          
        case 'goldBonus':
          return '+2.000%'
          
        case 'expBonus':
          return '+2.000%'
          
        default:
          return '+1'
      }
    },
    
    // 加载宠物数据
    loadPetData() {
      try {
        const petData = desktopPetManager.getPetData()
        const petSettings = desktopPetManager.getPetSettings()
        
        console.log('加载宠物数据:', petData)
        console.log('加载宠物设置:', petSettings)
        
        this.petData = { ...petData }
        this.petSettings = { ...petSettings }
      } catch (error) {
        console.error('加载宠物数据失败:', error)
        uni.showToast({
          title: '加载数据失败',
          icon: 'error'
        })
      }
    },
    
    // 设置事件监听
    setupEventListeners() {
      this.onPetDataUpdated = (data) => {
        this.petData = { ...data }
      }
      
      desktopPetManager.on('pet-data-updated', this.onPetDataUpdated)
    },
    
    // 移除事件监听
    removeEventListeners() {
      if (this.onPetDataUpdated) {
        desktopPetManager.off('pet-data-updated', this.onPetDataUpdated)
      }
    },
    
    // 更新宠物名称
    updatePetName() {
      console.log('更新宠物名称:', this.petData.name)
      desktopPetManager.updatePetData({ name: this.petData.name })
      // 不再重新加载数据，事件监听器会自动更新
      uni.showToast({
        title: '名称已更新',
        icon: 'success'
      })
    },
    
    // 选择表情
    selectEmoji(emoji) {
      console.log('选择表情:', emoji)
      this.petData.emoji = emoji
      desktopPetManager.updatePetData({ emoji })
      // 不再重新加载数据，事件监听器会自动更新
      uni.showToast({
        title: '表情已更换',
        icon: 'success'
      })
    },
    
    // 显示所有表情
    showAllEmojis() {
      uni.showActionSheet({
        itemList: this.availableEmojis,
        success: (res) => {
          const selectedEmoji = this.availableEmojis[res.tapIndex]
          this.selectEmoji(selectedEmoji)
        }
      })
    },
    
    // 切换宠物可见性
    togglePetVisibility(e) {
      const isActive = e.detail.value
      console.log('切换宠物可见性:', isActive)
      this.petData.isActive = isActive
      desktopPetManager.updatePetData({ isActive })
      // 不再重新加载数据，事件监听器会自动更新
      
      uni.showToast({
        title: isActive ? '宠物已显示' : '宠物已隐藏',
        icon: 'success'
      })
    },
    
    // 切换显示气泡
    toggleShowBubbles(e) {
      const showBubbles = e.detail.value
      console.log('切换显示气泡:', showBubbles)
      this.petSettings.showBubbles = showBubbles
      desktopPetManager.updatePetSettings({ showBubbles })
      // 不再重新加载数据，事件监听器会自动更新
      
      uni.showToast({
        title: showBubbles ? '气泡已开启' : '气泡已关闭',
        icon: 'success'
      })
    },
    
    // 切换语音识别
    toggleVoiceRecognition(e) {
      const voiceRecognition = e.detail.value
      console.log('切换语音识别:', voiceRecognition)
      this.petSettings.voiceRecognition = voiceRecognition
      desktopPetManager.updatePetSettings({ voiceRecognition })
      // 不再重新加载数据，事件监听器会自动更新
      
      uni.showToast({
        title: voiceRecognition ? '语音识别已开启' : '语音识别已关闭',
        icon: 'success'
      })
    },
    
    // 切换音效
    toggleSound(e) {
      const soundEnabled = e.detail.value
      console.log('切换音效:', soundEnabled)
      this.petSettings.soundEnabled = soundEnabled
      desktopPetManager.updatePetSettings({ soundEnabled })
      // 不再重新加载数据，事件监听器会自动更新
      
      uni.showToast({
        title: soundEnabled ? '音效已开启' : '音效已关闭',
        icon: 'success'
      })
    },
    
    // 切换自动喂食
    toggleAutoFeed(e) {
      const autoFeed = e.detail.value
      
      if (autoFeed) {
        this.showAutomationConfirm('autoFeed', '自动喂食', this.automationCosts.autoFeed, (confirmed) => {
          if (confirmed) {
            this.petSettings.autoFeed = true
            desktopPetManager.updatePetSettings({ autoFeed: true })
            uni.showToast({
              title: '自动喂食已开启',
              icon: 'success'
            })
          }
        })
      } else {
        this.petSettings.autoFeed = false
        desktopPetManager.updatePetSettings({ autoFeed: false })
        uni.showToast({
          title: '自动喂食已关闭',
          icon: 'success'
        })
      }
    },
    
    // 切换自动玩耍
    toggleAutoPlay(e) {
      const autoPlay = e.detail.value
      
      if (autoPlay) {
        this.showAutomationConfirm('autoPlay', '自动玩耍', this.automationCosts.autoPlay, (confirmed) => {
          if (confirmed) {
            this.petSettings.autoPlay = true
            desktopPetManager.updatePetSettings({ autoPlay: true })
            uni.showToast({
              title: '自动玩耍已开启',
              icon: 'success'
            })
          }
        })
      } else {
        this.petSettings.autoPlay = false
        desktopPetManager.updatePetSettings({ autoPlay: false })
        uni.showToast({
          title: '自动玩耍已关闭',
          icon: 'success'
        })
      }
    },
    
    // 切换自动休息
    toggleAutoRest(e) {
      const autoRest = e.detail.value
      
      if (autoRest) {
        this.showAutomationConfirm('autoRest', '自动休息', this.automationCosts.autoRest, (confirmed) => {
          if (confirmed) {
            this.petSettings.autoRest = true
            desktopPetManager.updatePetSettings({ autoRest: true })
            uni.showToast({
              title: '自动休息已开启',
              icon: 'success'
            })
          }
        })
      } else {
        this.petSettings.autoRest = false
        desktopPetManager.updatePetSettings({ autoRest: false })
        uni.showToast({
          title: '自动休息已关闭',
          icon: 'success'
        })
      }
    },
    
    // 切换自动清洁
    toggleAutoClean(e) {
      const autoClean = e.detail.value
      
      if (autoClean) {
        this.showAutomationConfirm('autoClean', '自动清洁', this.automationCosts.autoClean, (confirmed) => {
          if (confirmed) {
            this.petSettings.autoClean = true
            desktopPetManager.updatePetSettings({ autoClean: true })
            uni.showToast({
              title: '自动清洁已开启',
              icon: 'success'
            })
          }
        })
      } else {
        this.petSettings.autoClean = false
        desktopPetManager.updatePetSettings({ autoClean: false })
        uni.showToast({
          title: '自动清洁已关闭',
          icon: 'success'
        })
      }
    },
    
    // 切换自动治疗
    toggleAutoHeal(e) {
      const autoHeal = e.detail.value
      
      if (autoHeal) {
        this.showAutomationConfirm('autoHeal', '自动治疗', this.automationCosts.autoHeal, (confirmed) => {
          if (confirmed) {
            this.petSettings.autoHeal = true
            desktopPetManager.updatePetSettings({ autoHeal: true })
            uni.showToast({
              title: '自动治疗已开启',
              icon: 'success'
            })
          }
        })
      } else {
        this.petSettings.autoHeal = false
        desktopPetManager.updatePetSettings({ autoHeal: false })
        uni.showToast({
          title: '自动治疗已关闭',
          icon: 'success'
        })
      }
    },
    
    // 切换自动提升心情
    toggleAutoMoodBoost(e) {
      const autoMoodBoost = e.detail.value
      
      if (autoMoodBoost) {
        this.showAutomationConfirm('autoMoodBoost', '自动提升心情', this.automationCosts.autoMoodBoost, (confirmed) => {
          if (confirmed) {
            this.petSettings.autoMoodBoost = true
            desktopPetManager.updatePetSettings({ autoMoodBoost: true })
            uni.showToast({
              title: '自动提升心情已开启',
              icon: 'success'
            })
          }
        })
      } else {
        this.petSettings.autoMoodBoost = false
        desktopPetManager.updatePetSettings({ autoMoodBoost: false })
        uni.showToast({
          title: '自动提升心情已关闭',
          icon: 'success'
        })
      }
    },
    
    // 显示自动化确认提示
    showAutomationConfirm(type, name, cost, callback) {
      uni.showModal({
        title: '开启自动化功能',
        content: `开启${name}功能后，每次触发需要消耗${cost}金币。是否继续？`,
        confirmText: '确定',
        cancelText: '取消',
        success: (res) => {
          callback(res.confirm)
        }
      })
    },
    
    // 加载自动化数据
    loadAutomationData() {
      try {
        // 获取自动化消耗配置
        this.automationCosts = desktopPetManager.getAutomationCosts()
        
        // 获取自动化套餐配置
        this.automationPackages = desktopPetManager.getAllAutomationPackages()
        
        // 获取当前激活的套餐
        this.currentPackage = desktopPetManager.getCurrentAutomationPackage()
        
        console.log('自动化数据加载成功')
      } catch (error) {
        console.error('加载自动化数据失败:', error)
      }
    },
    
    // 购买套餐
    purchasePackage(type, pkg) {
      // 检查是否已有激活的套餐
      if (this.currentPackage && !this.currentPackage.isExpired) {
        uni.showModal({
          title: '提示',
          content: `您已有激活的${this.currentPackage.config.name}，是否要购买新的${pkg.name}套餐？`,
          confirmText: '购买',
          cancelText: '取消',
          success: (res) => {
            if (res.confirm) {
              this.doPurchasePackage(type, pkg)
            }
          }
        })
      } else {
        this.doPurchasePackage(type, pkg)
      }
    },
    
    // 执行购买套餐
    doPurchasePackage(type, pkg) {
      // 显示确认对话框
      const featureNames = pkg.features.map(f => this.getFeatureName(f)).join('、')
      
      uni.showModal({
        title: `购买${pkg.name}`,
        content: `${pkg.name}包含：${featureNames}。\n\n价格：${pkg.price}金币\n有效期：24小时\n\n是否购买？`,
        confirmText: '购买',
        cancelText: '取消',
        success: (res) => {
          if (res.confirm) {
            // 执行购买，传入 goldManager
            const result = desktopPetManager.purchaseAutomationPackage(type, goldManager)
            
            if (result.success) {
              uni.showToast({
                title: result.message,
                icon: 'success',
                duration: 2000
              })
              
              // 重新加载自动化数据和金币
              this.loadAutomationData()
              this.loadPetData()
              this.currentGold = goldManager.getCurrentGold()
            } else {
              uni.showModal({
                title: '购买失败',
                content: result.message,
                showCancel: false
              })
            }
          }
        }
      })
    },
    
    // 获取功能名称
    getFeatureName(feature) {
      const names = {
        autoFeed: '自动喂食',
        autoPlay: '自动玩耍',
        autoRest: '自动休息',
        autoClean: '自动清洁',
        autoHeal: '自动治疗',
        autoMoodBoost: '自动提升心情'
      }
      return names[feature] || feature
    },
    
    // 格式化套餐剩余时间
    formatPackageTime(milliseconds) {
      if (milliseconds <= 0) return '已过期'
      
      const seconds = Math.floor(milliseconds / 1000)
      const hours = Math.floor(seconds / 3600)
      const minutes = Math.floor((seconds % 3600) / 60)
      const secs = seconds % 60
      
      if (hours > 0) {
        return `${hours}小时${minutes}分`
      } else if (minutes > 0) {
        return `${minutes}分${secs}秒`
      } else {
        return `${secs}秒`
      }
    },
    
    
    // 加载成就数据
    loadAchievementData() {
      try {
        // 获取成就统计
        this.achievementStats = desktopPetManager.getAchievementStats()
        
        // 获取所有成就（带解锁状态）
        this.allAchievements = desktopPetManager.getAllAchievementsWithStatus()
        
        console.log('成就数据加载成功', this.achievementStats)
      } catch (error) {
        console.error('加载成就数据失败:', error)
      }
    },
    
    // 切换成就分类
    switchAchievementCategory(categoryId) {
      this.achievementActiveCategory = categoryId
    },
    
    // 获取分类进度
    getCategoryProgress(categoryId) {
      if (categoryId === 'all') {
        return `${this.achievementStats.unlocked}/${this.achievementStats.total}`
      }
      
      const category = this.achievementStats.categories[categoryId]
      if (category) {
        return `${category.unlocked}/${category.total}`
      }
      return '0/0'
    },
    
    // 获取成就图标
    getAchievementIcon(type) {
      const icons = {
        'first_feed': '🍼',
        'first_play': '🎾',
        'level_up': '⭐',
        'perfect_day': '🌟',
        'loyalty': '💝',
        'explorer': '🗺️',
        'social': '👥',
        'caregiver': '🤲'
      }
      return icons[type] || '🏆'
    },
    
    // 显示成就弹窗
    showAchievements() {
      this.showAchievementsModal = true
    },
    
    // 关闭成就弹窗
    closeAchievementsModal() {
      this.showAchievementsModal = false
    },
    
    // 切换Tab
    switchTab(tabId) {
      this.activeTab = tabId
      // 保存当前选择的Tab
      try {
        uni.setStorageSync('pet_settings_active_tab', tabId)
      } catch (error) {
        console.error('保存Tab状态失败:', error)
      }
    },
    
    // 加载上次选择的Tab
    loadLastActiveTab() {
      try {
        const lastTab = uni.getStorageSync('pet_settings_active_tab')
        if (lastTab) {
          // 验证Tab是否存在
          const tabExists = this.tabs.some(tab => tab.id === lastTab)
          if (tabExists) {
            this.activeTab = lastTab
            console.log('恢复上次选择的Tab:', lastTab)
          }
        }
        
        // 恢复自动化子Tab状态
        if (this.activeTab === 'automation') {
          const lastSubTab = uni.getStorageSync('pet_settings_automation_sub_tab')
          if (lastSubTab && (lastSubTab === 'packages' || lastSubTab === 'individual')) {
            this.automationSubTab = lastSubTab
          }
        }
      } catch (error) {
        console.error('加载Tab状态失败:', error)
      }
    },
    
    // 切换自动化子Tab
    switchAutomationSubTab(subTab) {
      this.automationSubTab = subTab
      // 保存自动化子Tab状态
      try {
        uni.setStorageSync('pet_settings_automation_sub_tab', subTab)
      } catch (error) {
        console.error('保存自动化子Tab状态失败:', error)
      }
    },
    
    // 初始化金币系统
    initGoldSystem() {
      // 加载当前金币
      this.currentGold = goldManager.getCurrentGold() || 0
      
      // 计算今日获得的金币
      this.calculateTodayGold()
      
      // 获取上次更新时间
      const goldData = goldManager.getGoldData()
      if (goldData && goldData.lastUpdateTime) {
        const now = Date.now()
        const lastUpdate = new Date(goldData.lastUpdateTime).getTime()
        const diffSeconds = Math.floor((now - lastUpdate) / 1000)
        this.runTime = diffSeconds
      }
      
      // 启动金币计时器
      this.startGoldTimer()
    },
    
    // 启动金币计时器
    startGoldTimer() {
      // 清除之前的计时器
      this.stopGoldTimer()
      
      // 每秒增加1金币
      this.goldTimer = setInterval(() => {
        this.addGoldPerSecond()
      }, 1000)
      
      // 每秒更新时间
      this.timeTimer = setInterval(() => {
        this.runTime++
      }, 1000)
      
      // 立即执行一次（如果距离上次更新超过1秒）
      const goldData = goldManager.getGoldData()
      if (goldData && goldData.lastUpdateTime) {
        const now = Date.now()
        const lastUpdate = new Date(goldData.lastUpdateTime).getTime()
        const diffSeconds = Math.floor((now - lastUpdate) / 1000)
        if (diffSeconds > 1) {
          // 如果距离上次更新超过1秒，立即增加金币
          for (let i = 0; i < Math.min(diffSeconds, 60); i++) {
            // 最多补60秒，避免一次性增加太多
            this.addGoldPerSecond(false) // 不显示动画
          }
        }
      }
    },
    
    // 停止金币计时器
    stopGoldTimer() {
      if (this.goldTimer) {
        clearInterval(this.goldTimer)
        this.goldTimer = null
      }
      if (this.timeTimer) {
        clearInterval(this.timeTimer)
        this.timeTimer = null
      }
    },
    
    // 每秒增加金币
    addGoldPerSecond(showAnimation = true) {
      // 检查是否在金币玩法tab
      if (this.activeTab === 'gold' && showAnimation) {
        this.showGoldAnimation = true
        this.isGoldIncreasing = true
        
        // 动画效果
        setTimeout(() => {
          this.showGoldAnimation = false
          this.isGoldIncreasing = false
        }, 600)
      }
      
      // 增加金币
      goldManager.addGold(1, '宠物金币玩法')
      this.currentGold = goldManager.getCurrentGold()
      this.todayGold++
      
      // 更新最后更新时间
      const goldData = goldManager.getGoldData()
      if (goldData) {
        goldData.lastUpdateTime = new Date().toISOString()
        goldManager.saveGoldData(goldData)
      }
    },
    
    // 计算今日获得的金币
    calculateTodayGold() {
      const goldData = goldManager.getGoldData()
      if (!goldData || !goldData.recentActivities) {
        this.todayGold = 0
        return
      }
      
      const today = new Date()
      today.setHours(0, 0, 0, 0)
      
      let todayGold = 0
      goldData.recentActivities.forEach(activity => {
        if (activity.type === 'earn' && activity.title === '宠物金币玩法') {
          // 活动记录的时间可能是字符串 "刚刚" 或时间戳
          // 如果是 "刚刚"，说明是今天添加的
          if (activity.time === '刚刚' || activity.time === '刚刚') {
            todayGold += activity.gold || 1
          } else {
            // 尝试解析时间
            try {
              const activityTime = new Date(activity.time)
              if (!isNaN(activityTime.getTime()) && activityTime >= today) {
                todayGold += activity.gold || 1
              }
            } catch (e) {
              // 如果解析失败，假设是今天的
              todayGold += activity.gold || 1
            }
          }
        }
      })
      
      this.todayGold = todayGold
    },
    
    // 格式化时间
    formatTime(seconds) {
      const hours = Math.floor(seconds / 3600)
      const minutes = Math.floor((seconds % 3600) / 60)
      const secs = seconds % 60
      
      if (hours > 0) {
        return `${hours}小时${minutes}分${secs}秒`
      } else if (minutes > 0) {
        return `${minutes}分${secs}秒`
      } else {
        return `${secs}秒`
      }
    },
    
    // ====== 战斗系统 ======
    
    // 添加战斗日志
    addBattleLog(message, icon = '⚔️', options = {}) {
      const log = {
        id: Date.now() + Math.random(),
        message,
        icon,
        isNew: true,
        isBoss: options.isBoss || false,
        isSpecial: options.isSpecial || false,
        timestamp: Date.now()
      }
      
      // 添加到数组开头
      this.battleLogs.unshift(log)
      
      // 限制日志数量
      if (this.battleLogs.length > this.maxLogs) {
        this.battleLogs.pop()
      }
      
      // 0.5秒后移除 isNew 状态
      setTimeout(() => {
        log.isNew = false
      }, 500)
    },
    
    // 加载战斗数据
    loadBattleData() {
      try {
        const savedData = uni.getStorageSync('pet_battle_data')
        if (savedData) {
          this.defeatedCount = savedData.defeatedCount || 0
          this.battleGoldEarned = savedData.battleGoldEarned || 0
          
          // 合并保存的属性数据，确保包含默认值
          if (savedData.battleAttributes) {
            this.battleAttributes = this.battleAttributes.map(defaultAttr => {
              const savedAttr = savedData.battleAttributes.find(a => a.id === defaultAttr.id)
              if (savedAttr) {
                return {
                  ...defaultAttr, // 保留默认的 costMultiplier 等字段
                  level: savedAttr.level || defaultAttr.level,
                  cost: savedAttr.cost || defaultAttr.cost
                }
              }
              return defaultAttr
            })
          }
          
          this.autoBattleEnabled = savedData.autoBattleEnabled || false
          this.bossStage = savedData.bossStage || 0
          this.enemyPowerLevel = savedData.enemyPowerLevel || 1
          this.currentWave = savedData.currentWave || 1
          this.waveEnemyCount = savedData.waveEnemyCount || 0
          
          // 如果之前开启了自动战斗，恢复自动战斗状态
          if (this.autoBattleEnabled) {
            this.$nextTick(() => {
              this.startBattle()
            })
          }
        }
        this.selectEnemy()
      } catch (error) {
        console.error('加载战斗数据失败:', error)
      }
    },
    
    // 保存战斗数据
    saveBattleData() {
      try {
        const data = {
          defeatedCount: this.defeatedCount,
          battleGoldEarned: this.battleGoldEarned,
          battleAttributes: this.battleAttributes,
          autoBattleEnabled: this.autoBattleEnabled,
          bossStage: this.bossStage,
          enemyPowerLevel: this.enemyPowerLevel,
          currentWave: this.currentWave,
          waveEnemyCount: this.waveEnemyCount
        }
        uni.setStorageSync('pet_battle_data', data)
      } catch (error) {
        console.error('保存战斗数据失败:', error)
      }
    },
    
    // 选择敌人（根据宠物等级和波次）
    selectEnemy() {
      // 每波的第10个敌人是BOSS
      if (this.waveEnemyCount >= this.enemiesPerWave && !this.isBossBattle) {
        this.spawnBoss()
        return
      }
      
      const petLevel = this.petData.level || 1
      const maxLevel = Math.min(petLevel, this.enemies.length)
      const enemyIndex = Math.floor(Math.random() * maxLevel)
      const baseEnemy = this.enemies[enemyIndex]
      
      // 根据敌人强化等级提升属性
      this.currentEnemy = {
        ...baseEnemy,
        hp: Math.floor(baseEnemy.hp * (1 + (this.enemyPowerLevel - 1) * 0.3)),
        reward: Math.floor(baseEnemy.reward * (1 + (this.enemyPowerLevel - 1) * 0.2))
      }
      
      this.isBossBattle = false
      this.enemyHp = 100
      this.isEnemyDefeated = false
    },
    
    // 生成BOSS
    spawnBoss() {
      const bossIndex = Math.min(this.bossStage, this.bosses.length - 1)
      const baseBoss = this.bosses[bossIndex]
      
      // BOSS属性也会随强化等级提升
      this.currentEnemy = {
        ...baseBoss,
        hp: Math.floor(baseBoss.hp * (1 + (this.enemyPowerLevel - 1) * 0.5)),
        reward: Math.floor(baseBoss.reward * (1 + (this.enemyPowerLevel - 1) * 0.3)),
        isBoss: true
      }
      
      this.isBossBattle = true
      this.enemyHp = 100
      this.isEnemyDefeated = false
      
      // 添加BOSS出现日志
      this.addBattleLog(
        `BOSS出现：${this.currentEnemy.name}！`, 
        '⚠️', 
        { isBoss: true, isSpecial: true }
      )
    },
    
    // 计算伤害
    calculateDamage() {
      const attackAttr = this.battleAttributes.find(a => a.id === 'attack')
      const critAttr = this.battleAttributes.find(a => a.id === 'critRate')
      const critDamageAttr = this.battleAttributes.find(a => a.id === 'critDamage')
      
      const baseDamage = attackAttr.baseValue + (attackAttr.level - 1) * 5
      const critChance = critAttr.baseValue + (critAttr.level - 1) * 0.5 // 改为0.5%增长
      
      const isCrit = Math.random() * 100 < critChance
      
      // 计算暴击伤害倍数
      const critMultiplier = critDamageAttr ? 
        critDamageAttr.baseValue + (critDamageAttr.level - 1) * 0.01 : 2.0 // 改为0.01增长
      
      const damage = isCrit ? baseDamage * critMultiplier : baseDamage
      
      return { damage, isCrit }
    },
    
    // 手动攻击
    manualAttack() {
      if (this.isEnemyDefeated) {
        this.selectEnemy()
        return
      }
      
      this.performAttack()
    },
    
    // 执行攻击
    performAttack() {
      this.isPetAttacking = true
      
      setTimeout(() => {
        const { damage, isCrit } = this.calculateDamage()
        const damagePercent = (damage / this.currentEnemy.hp) * 100
        
        this.enemyHp = Math.max(0, this.enemyHp - damagePercent)
        this.isEnemyHit = true
        this.showDamage = true
        this.damageText = `-${Math.floor(damage)}`
        this.isCritical = isCrit
        
        // 生命偷取效果
        const lifeStealAttr = this.battleAttributes.find(a => a.id === 'lifeSteal')
        if (lifeStealAttr && lifeStealAttr.level > 1) {
          const lifeStealPercent = (lifeStealAttr.level - 1) * 1 // 改为每级1%
          const healAmount = damage * lifeStealPercent / 100
          
          const managerPetData = desktopPetManager.getPetData()
          managerPetData.health = Math.min(100, managerPetData.health + healAmount)
          desktopPetManager.savePetData()
          this.petData = desktopPetManager.getPetData()
        }
        
        // 隐藏伤害文字
        setTimeout(() => {
          this.showDamage = false
          this.isEnemyHit = false
        }, 500)
        
        // 检查敌人是否被击败
        if (this.enemyHp <= 0) {
          this.defeatEnemy()
        } else {
          // 敌人未被击败，进行反击
          setTimeout(() => {
            this.enemyCounterAttack()
          }, 600)
        }
        
        this.isPetAttacking = false
      }, 300)
    },
    
    // 敌人反击
    enemyCounterAttack() {
      if (this.isEnemyDefeated) return
      
      this.isEnemyAttacking = true
      
      setTimeout(() => {
        // 计算敌人伤害（基于敌人强化等级和是否BOSS）
        let enemyDamage = 5 + (this.enemyPowerLevel - 1) * 2
        if (this.currentEnemy.isBoss) {
          enemyDamage *= 1.5 // BOSS伤害提高50%
        }
        
        // 应用防御力减伤
        const defenseAttr = this.battleAttributes.find(a => a.id === 'defense')
        if (defenseAttr && defenseAttr.level > 1) {
          const defenseReduction = (defenseAttr.level - 1) * 1 // 改为每级减少1%伤害
          enemyDamage = enemyDamage * (1 - defenseReduction / 100)
        }
        
        // 宠物受到伤害
        const managerPetData = desktopPetManager.getPetData()
        const oldHealth = managerPetData.health || 100
        managerPetData.health = Math.max(0, oldHealth - enemyDamage)
        
        // 保存数据
        desktopPetManager.savePetData()
        this.petData = desktopPetManager.getPetData()
        
        // 显示宠物受伤
        this.isPetHit = true
        this.showPetDamage = true
        this.petDamageText = `-${Math.floor(enemyDamage)}`
        
        // 检查宠物是否被击败
        if (managerPetData.health <= 0) {
          const wasAutoBattle = this.autoBattleEnabled // 记录是否是自动战斗
          const wasBossBattle = this.isBossBattle // 记录是否是BOSS战
          
          this.stopBattle() // 停止战斗
          
          if (wasBossBattle) {
            // 被BOSS击败，重新开始当前波次
            this.addBattleLog('被BOSS击败！重新挑战本波...', '💔', { isSpecial: true })
            this.waveEnemyCount = 0 // 重置当前波次计数
            this.isBossBattle = false
          } else {
            this.addBattleLog('宠物被击败！战斗失败...', '💔', { isSpecial: true })
          }
          
          // 3秒后恢复
          setTimeout(() => {
            managerPetData.health = 100
            desktopPetManager.savePetData()
            this.petData = desktopPetManager.getPetData()
            this.addBattleLog('宠物已恢复！继续战斗！', '❤️', { isSpecial: true })
            
            // 重新选择敌人
            this.selectEnemy()
            
            // 如果之前是自动战斗，恢复自动战斗
            if (wasAutoBattle) {
              this.$nextTick(() => {
                this.autoBattleEnabled = true
                this.startBattle()
              })
            }
          }, 3000)
        }
        
        // 隐藏效果
        setTimeout(() => {
          this.showPetDamage = false
          this.isPetHit = false
        }, 500)
        
        this.isEnemyAttacking = false
      }, 300)
    },
    
    // 击败敌人
    defeatEnemy() {
      this.isEnemyDefeated = true
      this.defeatedCount++
      this.comboCount++
      
      // 判断是否是BOSS战
      const isBoss = this.currentEnemy.isBoss
      
      // 计算金币奖励
      const goldBonusAttr = this.battleAttributes.find(a => a.id === 'goldBonus')
      const bonusPercent = (goldBonusAttr.level - 1) * 2 // 改为每级2%
      const baseReward = this.currentEnemy.reward
      const reward = Math.floor(baseReward * (1 + bonusPercent / 100))
      
      this.goldReward = reward
      this.battleGoldEarned += reward
      
      // 增加金币
      goldManager.addGold(reward, isBoss ? 'BOSS奖励' : '战斗奖励')
      this.currentGold = goldManager.getCurrentGold()
      
      // 显示奖励
      this.showGoldReward = true
      setTimeout(() => {
        this.showGoldReward = false
      }, 1000)
      
      // 增加宠物经验值
      let expToAdd = isBoss ? 30 : 10 // BOSS给更多经验
      
      // 应用经验加成
      const expBonusAttr = this.battleAttributes.find(a => a.id === 'expBonus')
      if (expBonusAttr && expBonusAttr.level > 1) {
        const expBonusPercent = (expBonusAttr.level - 1) * 2 // 改为每级2%
        expToAdd = Math.floor(expToAdd * (1 + expBonusPercent / 100))
      }
      
      // 获取 desktopPetManager 的 petData 引用
      const managerPetData = desktopPetManager.getPetData()
      
      // 直接修改 manager 的宠物数据
      managerPetData.exp = Math.min(managerPetData.maxExp, (managerPetData.exp || 0) + expToAdd)
      managerPetData.interactionCount++
      
      // 检查升级
      let leveledUp = false
      if (managerPetData.exp >= managerPetData.maxExp) {
        managerPetData.level++
        managerPetData.exp = 0
        managerPetData.maxExp = Math.floor(managerPetData.maxExp * 1.5)
        leveledUp = true
        
        // 添加升级日志
        this.addBattleLog(
          `宠物升级到 Lv.${managerPetData.level}！`, 
          '🎉', 
          { isSpecial: true }
        )
      }
      
      // 保存宠物数据
      desktopPetManager.savePetData()
      
      // 更新组件数据
      this.petData = desktopPetManager.getPetData()
      
      // 显示经验获得
      this.expGain = expToAdd
      this.showExpGain = true
      setTimeout(() => {
        this.showExpGain = false
      }, 1000)
      
      // 添加击败日志
      if (isBoss) {
        // 击败BOSS，进入下一波
        this.bossStage++
        this.enemyPowerLevel++ // 敌人强化等级提升
        this.isBossBattle = false
        this.currentWave++ // 进入下一波
        this.waveEnemyCount = 0 // 重置波次计数
        
        this.addBattleLog(
          `击败BOSS ${this.currentEnemy.name}！获得 ${reward} 💰`, 
          '👑', 
          { isBoss: true }
        )
        
        this.addBattleLog(
          `进入第 ${this.currentWave} 波！敌人强化至 Lv.${this.enemyPowerLevel}`, 
          '⚡', 
          { isSpecial: true }
        )
      } else {
        // 击败普通敌人
        this.waveEnemyCount++ // 增加当前波次击败数
        this.addBattleLog(
          `击败 ${this.currentEnemy.name}，获得 ${reward} 💰 +${expToAdd} EXP`, 
          '⚔️'
        )
      }
      
      // 1秒后刷新敌人
      setTimeout(() => {
        this.selectEnemy()
        this.loadPetData() // 重新加载宠物数据以同步等级变化
      }, 1000)
      
      this.saveBattleData()
    },
    
    // 切换自动战斗
    toggleAutoBattle() {
      this.autoBattleEnabled = !this.autoBattleEnabled
      
      if (this.autoBattleEnabled) {
        this.startBattle()
        uni.showToast({
          title: '自动战斗已开启',
          icon: 'success'
        })
      } else {
        this.stopBattle()
        uni.showToast({
          title: '自动战斗已关闭',
          icon: 'none'
        })
      }
      
      // 保存自动战斗状态
      this.saveBattleData()
    },
    
    // 开始战斗
    startBattle() {
      if (this.battleTimer) return
      
      const speedAttr = this.battleAttributes.find(a => a.id === 'speed')
      // 基础攻击间隔1000ms，每级缩短1%
      const speedReduction = (speedAttr.level - 1) * 1 // 1%每级
      const attackInterval = Math.floor(1000 * (1 - speedReduction / 100))
      
      this.battleTimer = setInterval(() => {
        if (!this.isEnemyDefeated) {
          this.performAttack()
        }
      }, attackInterval)
    },
    
    // 停止战斗
    stopBattle() {
      if (this.battleTimer) {
        clearInterval(this.battleTimer)
        this.battleTimer = null
      }
      this.comboCount = 0
    },
    
    // 升级属性
    upgradeAttribute(attrId) {
      const attr = this.battleAttributes.find(a => a.id === attrId)
      
      if (!attr) return
      
      // 检查是否已达到最大等级
      if (attr.maxLevel && attr.level >= attr.maxLevel) {
        uni.showToast({
          title: '已达到最大等级',
          icon: 'none'
        })
        return
      }
      
      if (this.currentGold < attr.cost) {
        uni.showToast({
          title: '金币不足',
          icon: 'none'
        })
        return
      }
      
      // 扣除金币
      goldManager.spendGold(attr.cost, `升级${attr.name}`)
      this.currentGold = goldManager.getCurrentGold()
      
      // 升级
      attr.level++
      // 使用倍增系数计算下次升级成本
      attr.cost = Math.floor(attr.cost * attr.costMultiplier)
      
      // 添加升级日志
      this.addBattleLog(
        `${attr.name} 升级至 Lv.${attr.level}！`, 
        attr.icon, 
        { isSpecial: true }
      )
      
      // 如果是速度升级且自动战斗开启，重启战斗以应用新速度
      if (attrId === 'speed' && this.autoBattleEnabled) {
        this.stopBattle()
        this.startBattle()
      }
      
      this.saveBattleData()
    }
  }
}
</script>

<style scoped>
/* 虚拟宠物风格的页面容器 */
.pet-settings-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 16rpx;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  width: 100%;
  box-sizing: border-box;
}

.tab-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tab-content {
  flex: 1;
  overflow-y: auto;
}

/* 虚拟宠物风格的页面头部 */
.page-header {
  margin-bottom: 8rpx;
}

.header-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16rpx;
  padding: 20rpx;
  text-align: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.page-title {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  color: #2d3436;
  margin-bottom: 6rpx;
}

.page-subtitle {
  display: block;
  font-size: 16rpx;
  color: #636e72;
}

/* 虚拟宠物风格的信息卡片 */
.pet-info-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 16rpx;
}

.pet-header {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.pet-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.pet-emoji {
  font-size: 28rpx;
}

.pet-info {
  flex: 1;
}

.pet-name {
  display: block;
  font-size: 24rpx;
  font-weight: bold;
  color: #2d3436;
  margin-bottom: 6rpx;
}

.pet-level {
  display: block;
  font-size: 18rpx;
  color: #636e72;
}

/* 虚拟宠物风格的状态条 */
.status-bars {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.status-bar {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.status-label {
  width: 70rpx;
  font-size: 18rpx;
  color: #636e72;
  font-weight: 500;
}

.progress-bar {
  flex: 1;
  height: 12rpx;
  background: #f1f3f4;
  border-radius: 6rpx;
  overflow: hidden;
  box-shadow: inset 0 1rpx 3rpx rgba(0, 0, 0, 0.1);
}

.progress-fill {
  height: 100%;
  border-radius: 6rpx;
  transition: width 0.5s ease;
  box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.2);
}

.progress-bar.mood .progress-fill {
  background: linear-gradient(90deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
}

.progress-bar.hunger .progress-fill {
  background: linear-gradient(90deg, #ffecd2 0%, #fcb69f 100%);
}

.progress-bar.energy .progress-fill {
  background: linear-gradient(90deg, #a8edea 0%, #fed6e3 100%);
}

.progress-bar.cleanliness .progress-fill {
  background: linear-gradient(90deg, #89f7fe 0%, #66a6ff 100%);
}

.progress-bar.health .progress-fill {
  background: linear-gradient(90deg, #fa709a 0%, #fee140 100%);
}

.status-value {
  width: 60rpx;
  text-align: right;
  font-size: 16rpx;
  color: #636e72;
  font-weight: 600;
}

/* Tab切换组件样式 */
.tab-container {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Tab栏样式 - 移动到底部 */
.tabs {
  display: flex;
  background: rgba(245, 247, 250, 0.95);
  border-top: 1rpx solid rgba(0, 0, 0, 0.05);
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  z-index: 100;
}

.tabs.bottom-tabs {
  border-top: 1rpx solid rgba(0, 0, 0, 0.05);
  border-bottom: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20rpx 0;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.tab-icon {
  font-size: 24rpx;
  margin-bottom: 4rpx;
}

.tab-text {
  font-size: 16rpx;
  color: #636e72;
  font-weight: 500;
}

.tab.active {
  background: rgba(102, 126, 234, 0.1);
}

.tab.active .tab-text {
  color: #667eea;
  font-weight: 600;
}

.tab.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 4rpx;
  background: #667eea;
  border-radius: 2rpx;
}

/* Tab内容区域样式 */
.tab-content {
  padding: 20rpx;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.tab-pane {
  animation: fadeIn 0.3s ease;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 自动化提示样式 */
.automation-tips {
  margin-top: 20rpx;
  padding: 16rpx;
  background: linear-gradient(135deg, #ffeaa7 0%, #fab1a0 100%);
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.tips-icon {
  font-size: 20rpx;
}

.tips-text {
  flex: 1;
  font-size: 14rpx;
  color: #2d3436;
  line-height: 1.5;
}

/* 虚拟宠物风格的设置卡片 */
.settings-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16rpx;
  padding: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.settings-card:hover {
  transform: translateY(-2rpx);
  box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.15);
}

.card-title {
  display: block;
  font-size: 20rpx;
  font-weight: bold;
  color: #2d3436;
  margin-bottom: 12rpx;
  padding-bottom: 8rpx;
  border-bottom: 2rpx solid #f1f3f4;
  flex: 0 0 auto;
}

/* 紧凑的设置行 */
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6rpx;
  flex: 0 0 auto;
}

.setting-row:last-child {
  margin-bottom: 0;
}

.setting-label {
  font-size: 16rpx;
  color: #636e72;
  width: 80rpx;
}

.compact-input {
  flex: 1;
  padding: 6rpx 8rpx;
  border: 1rpx solid #e9ecef;
  border-radius: 6rpx;
  font-size: 16rpx;
  margin-left: 8rpx;
}

/* 紧凑的表情选择器 */
.emoji-selector-compact {
  display: flex;
  align-items: center;
  gap: 4rpx;
  margin-left: 8rpx;
}

.emoji-option-compact {
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.emoji-option-compact.selected {
  background: #667eea;
  transform: scale(1.1);
}

.emoji-option-compact .emoji {
  font-size: 12rpx;
}

.more-emojis {
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12rpx;
  color: #636e72;
}

/* 宠物统计卡片 */
.stats-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12rpx;
  padding: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8rpx;
  flex: 1;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8rpx;
  background: rgba(102, 126, 234, 0.1);
  border-radius: 8rpx;
  text-align: center;
}

.stat-icon {
  font-size: 20rpx;
  margin-bottom: 4rpx;
}

.stat-label {
  font-size: 12rpx;
  color: #636e72;
  margin-bottom: 2rpx;
}

.stat-value {
  font-size: 14rpx;
  font-weight: bold;
  color: #2d3436;
}

/* 虚拟宠物风格的快速操作区域 */
.quick-actions-section {
  margin-bottom: 16rpx;
}

.section-title {
  display: block;
  font-size: 20rpx;
  font-weight: bold;
  color: #2d3436;
  margin-bottom: 12rpx;
  padding-left: 4rpx;
}


.action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16rpx 12rpx;
  background: rgba(255, 255, 255, 0.95);
  border: none;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.action-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.action-card:hover::before {
  opacity: 1;
}

.action-card:active {
  transform: scale(0.95);
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
}

.action-icon {
  font-size: 28rpx;
  margin-bottom: 8rpx;
  position: relative;
  z-index: 1;
}

.action-label {
  font-size: 16rpx;
  font-weight: bold;
  color: #2d3436;
  margin-bottom: 4rpx;
  position: relative;
  z-index: 1;
}

.action-desc {
  font-size: 12rpx;
  color: #636e72;
  position: relative;
  z-index: 1;
}

/* 虚拟宠物风格的成就展示区域 */
.achievements-section {
  margin-bottom: 16rpx;
}

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12rpx;
}

.achievement-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12rpx 8rpx;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: transform 0.2s ease;
}

.achievement-item:hover {
  transform: translateY(-2rpx);
}

.achievement-icon {
  font-size: 24rpx;
  margin-bottom: 6rpx;
}

.achievement-name {
  font-size: 12rpx;
  color: #2d3436;
  text-align: center;
  line-height: 1.3;
  font-weight: 500;
}

/* 成就摘要卡片 */
.achievement-summary-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
}

.achievement-summary-card:hover {
  transform: translateY(-2rpx);
  box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.15);
}

.achievement-summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.achievement-count {
  font-size: 16rpx;
  color: #667eea;
  font-weight: bold;
}

.achievement-preview {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-bottom: 12rpx;
}

.preview-item {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  background: rgba(102, 126, 234, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-icon {
  font-size: 20rpx;
}

.preview-more {
  font-size: 16rpx;
  color: #667eea;
  font-weight: bold;
}

.achievement-tip {
  font-size: 14rpx;
  color: #636e72;
  text-align: center;
  font-style: italic;
}

/* 成就弹窗 */
.achievement-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 40rpx;
}

.modal-content {
  background: white;
  border-radius: 20rpx;
  width: 100%;
  max-width: 600rpx;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 32rpx;
  border-bottom: 2rpx solid #f1f3f4;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.modal-title {
  font-size: 28rpx;
  font-weight: bold;
  color: white;
}

.modal-close {
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: white;
  cursor: pointer;
}

.modal-body {
  padding: 24rpx 32rpx;
  max-height: 60vh;
  overflow-y: auto;
}

.achievements-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.achievement-modal-item {
  display: flex;
  align-items: center;
  padding: 16rpx;
  background: rgba(102, 126, 234, 0.05);
  border-radius: 12rpx;
  border-left: 6rpx solid #667eea;
}

.achievement-modal-icon {
  font-size: 32rpx;
  margin-right: 16rpx;
  flex-shrink: 0;
}

.achievement-modal-info {
  flex: 1;
}

.achievement-modal-name {
  display: block;
  font-size: 20rpx;
  font-weight: bold;
  color: #2d3436;
  margin-bottom: 4rpx;
}

.achievement-modal-desc {
  display: block;
  font-size: 16rpx;
  color: #636e72;
  line-height: 1.4;
}

/* 移动端优化 - 大幅增加间距和尺寸 */
@media screen and (max-width: 750rpx) {
  /* 基础容器优化 - 大幅增加内边距 */
  .pet-settings-container {
    padding: 20rpx 16rpx;
    box-sizing: border-box;
    gap: 16rpx;
    min-height: 100vh;
  }
  
  /* 页面头部优化 */
  .header-card {
    padding: 20rpx 16rpx;
    margin-bottom: 12rpx;
    border-radius: 16rpx;
  }
  
  .page-title {
    font-size: 28rpx;
    margin-bottom: 8rpx;
  }
  
  .page-subtitle {
    font-size: 18rpx;
  }
  
  /* 宠物信息卡片优化 */
  .pet-info-card {
    padding: 20rpx 16rpx;
    margin-bottom: 12rpx;
    border-radius: 16rpx;
  }
  
  .pet-header {
    margin-bottom: 16rpx;
  }
  
  .pet-avatar {
    width: 60rpx;
    height: 60rpx;
    margin-right: 16rpx;
  }
  
  .pet-emoji {
    font-size: 32rpx;
  }
  
  .pet-name {
    font-size: 24rpx;
    margin-bottom: 4rpx;
  }
  
  .pet-level {
    font-size: 18rpx;
  }
  
  /* 状态条优化 - 大幅增加间距 */
  .status-bars {
    margin-top: 16rpx;
    gap: 12rpx;
  }
  
  .status-bar {
    margin-bottom: 12rpx;
    padding: 6rpx 0;
    gap: 8rpx;
  }
  
  .status-bar:last-child {
    margin-bottom: 0;
  }
  
  .status-label {
    font-size: 18rpx;
    width: 60rpx;
  }
  
  .progress-bar {
    height: 20rpx;
    flex: 1;
    margin: 0 8rpx;
  }
  
  .status-value {
    font-size: 16rpx;
    width: 60rpx;
  }
  
  /* 主内容区域优化 - 单列布局 */
  .main-content {
    flex-direction: column;
    gap: 12rpx;
    margin-bottom: 12rpx;
  }
  
  /* 设置卡片优化 - 大幅增加间距 */
  .settings-card, .stats-card {
    padding: 16rpx;
    margin-bottom: 0;
    border-radius: 16rpx;
  }
  
  .card-title {
    font-size: 22rpx;
    margin-bottom: 12rpx;
    padding-bottom: 8rpx;
  }
  
  .setting-row {
    margin-bottom: 16rpx;
    align-items: center;
    padding: 6rpx 0;
  }
  
  .setting-row:last-child {
    margin-bottom: 0;
  }
  
  .setting-label {
    font-size: 18rpx;
    width: 100rpx;
  }
  
  .compact-input {
    font-size: 18rpx;
    height: 48rpx;
    padding: 0 12rpx;
    margin-left: 8rpx;
  }
  
  .emoji-selector-compact {
    flex: 1;
    gap: 8rpx;
    margin-left: 8rpx;
  }
  
  .emoji-option-compact {
    width: 60rpx;
    height: 60rpx;
    margin-right: 0;
  }
  
  .emoji {
    font-size: 32rpx;
  }
  
  .more-emojis {
    width: 60rpx;
    height: 60rpx;
    font-size: 32rpx;
  }
  
  /* 统计卡片优化 */
  .stats-grid {
    display: flex;
    flex-direction: column;
    gap: 12rpx;
  }
  
  .stat-item {
    padding: 16rpx 12rpx;
    border-radius: 16rpx;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    min-height: 60rpx;
  }
  
  .stat-icon {
    font-size: 28rpx;
    margin-bottom: 0;
    flex-shrink: 0;
  }
  
  .stat-label {
    font-size: 18rpx;
    margin-bottom: 0;
    flex: 1;
    text-align: left;
    margin-left: 12rpx;
  }
  
  .stat-value {
    font-size: 18rpx;
    font-weight: bold;
    text-align: right;
  }
  
  
  /* 成就区域优化 - 大幅增加间距 */
  .achievements-section {
    margin-bottom: 12rpx;
  }
  
  .achievements-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8rpx;
  }
  
  .achievement-item {
    padding: 12rpx 10rpx;
    border-radius: 12rpx;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    min-height: 50rpx;
  }
  
  .achievement-icon {
    font-size: 24rpx;
    margin-bottom: 0;
    margin-right: 12rpx;
    flex-shrink: 0;
  }
  
  .achievement-name {
    font-size: 16rpx;
    text-align: left;
    flex: 1;
    line-height: 1.2;
  }
}

/* 额外响应式样式 - 适配不同设备尺寸 */
@media screen and (max-width: 375px) {
  .tab {
    padding: 20rpx 8rpx;
  }
  
  .tab-icon {
    font-size: 20rpx;
  }
  
  .tab-text {
    font-size: 14rpx;
  }
  
  .tabs {
    justify-content: space-around;
  }
  
  .tab-content {
    padding: 16rpx;
  }
}

@media screen and (min-width: 768px) {
  .pet-settings-container {
    max-width: 800rpx;
    margin: 0 auto;
    padding: 32rpx;
  }
  
  .pet-info-card {
    max-width: 750rpx;
    margin: 0 auto 24rpx;
  }
  
  .tab-container {
    max-width: 750rpx;
    margin: 0 auto;
  }
  
  .tabs {
    justify-content: center;
  }
  
  .tab {
    padding: 24rpx 32rpx;
    min-width: 180rpx;
  }
  
  .tab-content {
    padding: 32rpx;
  }
  
  .settings-card, .stats-card {
    padding: 24rpx;
  }
}

/* 金币玩法样式 */
.gold-game-card {
  background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
  border-radius: 16rpx;
  padding: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.gold-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.gold-title {
  font-size: 24rpx;
  font-weight: bold;
  color: #2d3436;
}

.gold-display {
  display: flex;
  align-items: center;
  gap: 8rpx;
  position: relative;
}

.gold-icon {
  font-size: 32rpx;
  animation: coinRotate 2s linear infinite;
}

@keyframes coinRotate {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

.gold-amount {
  font-size: 32rpx;
  font-weight: bold;
  color: #fdcb6e;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.gold-amount.gold-increase {
  animation: goldPulse 0.6s ease;
  color: #ffeaa7;
  transform: scale(1.2);
}

@keyframes goldPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

.gold-animation {
  position: absolute;
  top: -30rpx;
  right: -20rpx;
  font-size: 24rpx;
  font-weight: bold;
  color: #fdcb6e;
  animation: goldFloat 0.6s ease-out forwards;
  pointer-events: none;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

@keyframes goldFloat {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-40rpx) scale(1.2);
  }
}

.gold-info {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
  margin-bottom: 20rpx;
  padding: 16rpx;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 12rpx;
}

.gold-desc {
  font-size: 18rpx;
  color: #2d3436;
  font-weight: 500;
}

.gold-timer {
  font-size: 16rpx;
  color: #636e72;
}

.gold-stats {
  display: flex;
  gap: 16rpx;
}

.gold-stats .stat-item {
  flex: 1;
  padding: 16rpx;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 12rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gold-stats .stat-label {
  font-size: 16rpx;
  color: #636e72;
  margin-bottom: 8rpx;
}

.gold-stats .stat-value {
  font-size: 24rpx;
  font-weight: bold;
  color: #2d3436;
}

/* 自动化套餐样式 */
.automation-packages-card {
  margin-bottom: 16rpx;
}

.current-package {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12rpx;
  margin-bottom: 16rpx;
}

.package-badge {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.badge-icon {
  font-size: 20rpx;
}

.badge-text {
  font-size: 18rpx;
  font-weight: bold;
  color: white;
}

.package-expire {
  font-size: 14rpx;
  color: white;
  opacity: 0.9;
}

.package-list {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.package-item {
  padding: 16rpx;
  background: rgba(102, 126, 234, 0.05);
  border: 2rpx solid rgba(102, 126, 234, 0.2);
  border-radius: 12rpx;
  cursor: pointer;
  transition: all 0.3s ease;
}

.package-item:hover {
  background: rgba(102, 126, 234, 0.1);
  border-color: rgba(102, 126, 234, 0.4);
  transform: translateY(-2rpx);
}

.package-item.active {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
  border-color: #667eea;
  box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.2);
}

.package-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
}

.package-name {
  font-size: 20rpx;
  font-weight: bold;
  color: #2d3436;
}

.package-price {
  font-size: 18rpx;
  font-weight: bold;
  color: #667eea;
}

.package-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8rpx;
  margin-bottom: 12rpx;
}

.package-feature {
  font-size: 14rpx;
  padding: 4rpx 12rpx;
  background: rgba(102, 126, 234, 0.1);
  border-radius: 20rpx;
  color: #667eea;
}

.package-duration {
  margin-top: 8rpx;
}

.duration-text {
  font-size: 14rpx;
  color: #636e72;
}

.card-subtitle {
  display: block;
  font-size: 14rpx;
  color: #636e72;
  margin-bottom: 16rpx;
  padding-bottom: 8rpx;
  border-bottom: 1rpx solid #f1f3f4;
}

.setting-info {
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}

.setting-cost {
  font-size: 12rpx;
  color: #f39c12;
  font-weight: 500;
}

/* 自动化子Tab样式 */
.automation-tabs {
  display: flex;
  gap: 12rpx;
  margin-bottom: 16rpx;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12rpx;
  padding: 8rpx;
}

.automation-tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16rpx 12rpx;
  background: transparent;
  border-radius: 8rpx;
  cursor: pointer;
  transition: all 0.3s ease;
}

.automation-tab-item.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.tab-item-icon {
  font-size: 24rpx;
  margin-bottom: 4rpx;
}

.automation-tab-item.active .tab-item-icon,
.automation-tab-item.active .tab-item-text {
  color: white;
}

.tab-item-text {
  font-size: 14rpx;
  color: #636e72;
  font-weight: 500;
}

.automation-content {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

/* 当前套餐横幅 */
.current-package-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 20rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
}

.banner-left {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.banner-icon {
  font-size: 28rpx;
}

.banner-info {
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}

.banner-title {
  font-size: 18rpx;
  font-weight: bold;
  color: white;
}

.banner-time {
  font-size: 14rpx;
  color: rgba(255, 255, 255, 0.9);
}

.banner-badge {
  padding: 6rpx 16rpx;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 20rpx;
  font-size: 14rpx;
  color: white;
  font-weight: bold;
}

/* 套餐网格 */
.package-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12rpx;
}

.package-card {
  background: white;
  border-radius: 16rpx;
  padding: 20rpx;
  border: 2rpx solid rgba(102, 126, 234, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.package-card:active {
  transform: scale(0.98);
}

.package-card.active {
  border-color: #667eea;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.2);
}

.package-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12rpx;
}

.package-card-name {
  font-size: 22rpx;
  font-weight: bold;
  color: #2d3436;
}

.package-card-price-box {
  display: flex;
  align-items: baseline;
  gap: 4rpx;
}

.package-card-price {
  font-size: 28rpx;
  font-weight: bold;
  color: #667eea;
}

.package-card-unit {
  font-size: 14rpx;
  color: #636e72;
}

.package-card-duration {
  display: flex;
  align-items: center;
  gap: 6rpx;
  margin-bottom: 12rpx;
}

.duration-icon {
  font-size: 16rpx;
}

.package-card-duration .duration-text {
  font-size: 14rpx;
  color: #636e72;
}

.package-card-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8rpx;
  margin-bottom: 16rpx;
}

.feature-tag {
  font-size: 12rpx;
  padding: 4rpx 12rpx;
  background: rgba(102, 126, 234, 0.1);
  border-radius: 20rpx;
  color: #667eea;
}

.feature-more {
  font-size: 12rpx;
  padding: 4rpx 12rpx;
  background: rgba(102, 126, 234, 0.05);
  border-radius: 20rpx;
  color: #636e72;
}

.package-card-btn {
  width: 100%;
  padding: 12rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8rpx;
  text-align: center;
  transition: all 0.3s ease;
}

.package-card.active .package-card-btn {
  background: #95a5a6;
}

.btn-text {
  font-size: 16rpx;
  font-weight: bold;
  color: white;
}

/* 响应式优化 */
@media screen and (min-width: 500px) {
  .package-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 成就进度条样式 */
.achievement-progress-bar {
  margin-top: 16rpx;
  padding-top: 16rpx;
  border-top: 1rpx solid rgba(0, 0, 0, 0.05);
}

.progress-bar-container {
  width: 100%;
  height: 12rpx;
  background: rgba(102, 126, 234, 0.1);
  border-radius: 6rpx;
  overflow: hidden;
  margin-bottom: 8rpx;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  border-radius: 6rpx;
  transition: width 0.5s ease;
}

.progress-text {
  font-size: 14rpx;
  color: #636e72;
  text-align: center;
  display: block;
}

/* 统计Tab特殊布局 */
.stats-tab-pane {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.stats-fixed-header {
  flex-shrink: 0;
  margin-bottom: 16rpx;
}

.achievement-tabs-fixed {
  flex-shrink: 0;
  margin-bottom: 16rpx;
}

/* 成就滚动区域 */
.achievements-scroll-view {
  flex: 1;
  height: 0; /* 配合flex使用 */
  overflow-y: auto;
}

/* 成就分类Tab样式 */
.achievement-tabs-section {
  margin: 0;
  background: white;
  border-radius: 12rpx;
  padding: 8rpx;
}

.achievement-tabs-scroll {
  display: flex;
  gap: 8rpx;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4rpx;
}

.achievement-tabs-scroll::-webkit-scrollbar {
  display: none;
}

.achievement-category-tab {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12rpx 16rpx;
  background: rgba(102, 126, 234, 0.05);
  border-radius: 8rpx;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 80rpx;
}

.achievement-category-tab.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.category-icon {
  font-size: 20rpx;
  margin-bottom: 4rpx;
}

.category-name {
  font-size: 14rpx;
  color: #2d3436;
  margin-bottom: 4rpx;
  white-space: nowrap;
}

.achievement-category-tab.active .category-name,
.achievement-category-tab.active .category-progress {
  color: white;
}

.category-progress {
  font-size: 12rpx;
  color: #636e72;
}

/* 成就列表样式 */
.achievements-list-section {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
  padding: 0 4rpx 20rpx;
}

.achievement-card {
  display: flex;
  align-items: center;
  padding: 16rpx;
  background: white;
  border-radius: 12rpx;
  border: 2rpx solid rgba(102, 126, 234, 0.1);
  transition: all 0.3s ease;
}

.achievement-card.unlocked {
  border-color: rgba(102, 126, 234, 0.3);
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.achievement-card.locked {
  opacity: 0.6;
}

.achievement-icon-wrapper {
  position: relative;
  width: 56rpx;
  height: 56rpx;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(102, 126, 234, 0.1);
  border-radius: 50%;
  margin-right: 16rpx;
}

.achievement-card.unlocked .achievement-icon-wrapper {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.achievement-icon {
  font-size: 28rpx;
}

.unlocked-badge {
  position: absolute;
  bottom: -4rpx;
  right: -4rpx;
  width: 20rpx;
  height: 20rpx;
  background: #4CAF50;
  border-radius: 50%;
  color: white;
  font-size: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2rpx solid white;
}

.achievement-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}

.achievement-name {
  font-size: 16rpx;
  font-weight: bold;
  color: #2d3436;
}

.achievement-description {
  font-size: 14rpx;
  color: #636e72;
  line-height: 1.4;
}

.achievement-requirement {
  font-size: 12rpx;
  color: #667eea;
  background: rgba(102, 126, 234, 0.1);
  padding: 4rpx 8rpx;
  border-radius: 4rpx;
  display: inline-block;
  align-self: flex-start;
  margin-top: 4rpx;
}

.empty-achievements {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60rpx 20rpx;
  background: white;
  border-radius: 12rpx;
}

.empty-icon {
  font-size: 48rpx;
  margin-bottom: 16rpx;
}

.empty-text {
  font-size: 14rpx;
  color: #636e72;
}

/* ========== 战斗系统样式 ========== */

/* 战斗竞技场 */
.battle-arena {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 16rpx;
}

/* 标题栏 */
.arena-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  gap: 12rpx;
  flex-wrap: wrap;
}

.arena-title {
  font-size: 20rpx;
  font-weight: bold;
  color: white;
  flex-shrink: 0;
}

/* 波次显示 */
.wave-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10rpx);
  padding: 8rpx 16rpx;
  border-radius: 12rpx;
  border: 2rpx solid rgba(255, 255, 255, 0.3);
  gap: 2rpx;
}

.wave-text {
  font-size: 16rpx;
  font-weight: bold;
  color: #ffed4e;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

.wave-progress {
  font-size: 14rpx;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
}

.arena-header-right {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

/* 战力显示 */
.battle-power-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6rpx 16rpx;
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.4);
}

.power-label {
  font-size: 10rpx;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1;
  margin-bottom: 2rpx;
}

.power-value {
  font-size: 18rpx;
  font-weight: bold;
  color: white;
  line-height: 1;
}

.arena-stats {
  display: flex;
  align-items: center;
  gap: 8rpx;
  background: rgba(255, 255, 255, 0.15);
  padding: 6rpx 12rpx;
  border-radius: 16rpx;
  backdrop-filter: blur(10rpx);
  flex-shrink: 0;
}

.arena-stat-item {
  display: flex;
  align-items: center;
  gap: 2rpx;
  min-width: 0;
}

.arena-stat-value {
  font-size: 14rpx;
  font-weight: bold;
  color: #ffd700;
  white-space: nowrap;
}

.arena-stat-value-small {
  font-size: 11rpx;
  font-weight: 500;
  color: white;
  white-space: nowrap;
}

.arena-stat-label {
  font-size: 13rpx;
  flex-shrink: 0;
}

.arena-stat-divider {
  width: 1rpx;
  height: 16rpx;
  background: rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

/* 战斗场景 */
.battle-scene {
  position: relative;
  height: 300rpx;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 20rpx;
  margin-bottom: 12rpx;
  overflow: hidden;
}

.battle-scene::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40rpx;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 0 0 12rpx 12rpx;
}

/* 宠物角色 */
.battle-pet {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 10;
  animation: petIdle 2s ease-in-out infinite;
}

.battle-pet.attacking {
  animation: petAttack 0.3s ease-out;
}

.battle-pet.hit {
  animation: petHit 0.5s ease-out;
}

@keyframes petHit {
  0%, 100% { transform: translateX(0); filter: brightness(1); }
  25% { transform: translateX(10rpx); filter: brightness(2); }
  75% { transform: translateX(-10rpx); filter: brightness(2); }
}

@keyframes petIdle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10rpx); }
}

@keyframes petAttack {
  0% { transform: translateX(0) scale(1); }
  30% { transform: translateX(40rpx) scale(1.2); }
  50% { transform: translateX(40rpx) scale(1.2) rotate(15deg); }
  100% { transform: translateX(0) scale(1) rotate(0deg); }
}

.pet-character {
  font-size: 80rpx;
  filter: drop-shadow(0 4rpx 8rpx rgba(0, 0, 0, 0.3));
  margin-bottom: 8rpx;
}

.pet-status-bars {
  display: flex;
  flex-direction: column;
  gap: 4rpx;
  width: 120rpx;
}

.pet-hp-bar, .pet-exp-bar, .enemy-hp-bar {
  width: 100%;
  height: 10rpx;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 5rpx;
  overflow: hidden;
}

.hp-fill {
  height: 100%;
  background: linear-gradient(90deg, #4CAF50 0%, #8BC34A 100%);
  border-radius: 5rpx;
  transition: width 0.3s ease;
}

.hp-fill.enemy {
  background: linear-gradient(90deg, #f44336 0%, #ff5722 100%);
}

.exp-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffd700 0%, #ffed4e 100%);
  border-radius: 5rpx;
  transition: width 0.3s ease;
  box-shadow: 0 0 8rpx rgba(255, 215, 0, 0.6);
}

.pet-level-badge {
  margin-top: 8rpx;
  padding: 4rpx 12rpx;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  font-size: 14rpx;
  font-weight: bold;
  color: #667eea;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.pet-exp-text {
  margin-top: 4rpx;
  font-size: 11rpx;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.3);
  padding: 2rpx 8rpx;
  border-radius: 10rpx;
  font-weight: 500;
}

/* 宠物经验获得特效 */
.pet-battle-effects {
  position: absolute;
  top: -60rpx;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  pointer-events: none;
}

.exp-gain-text {
  font-size: 28rpx;
  font-weight: bold;
  color: #ffed4e;
  text-shadow: 
    0 0 10rpx rgba(255, 215, 0, 0.8),
    0 0 20rpx rgba(255, 215, 0, 0.5),
    2rpx 2rpx 4rpx rgba(0, 0, 0, 0.5);
  animation: expFloatUp 1s ease-out forwards;
}

@keyframes expFloatUp {
  0% { 
    transform: translateY(20rpx) scale(0.5); 
    opacity: 0; 
  }
  30% { 
    transform: translateY(0) scale(1.2); 
    opacity: 1; 
  }
  100% { 
    transform: translateY(-60rpx) scale(1); 
    opacity: 0; 
  }
}

/* 宠物受伤特效 */
.pet-damage-effects {
  position: absolute;
  top: -80rpx;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  pointer-events: none;
}

.pet-damage-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #ff4757;
  text-shadow: 
    0 0 10rpx rgba(255, 71, 87, 0.8),
    0 0 20rpx rgba(255, 71, 87, 0.5),
    2rpx 2rpx 4rpx rgba(0, 0, 0, 0.5);
  animation: petDamageFloat 0.6s ease-out forwards;
}

@keyframes petDamageFloat {
  0% { 
    transform: translateY(20rpx) scale(0.5); 
    opacity: 0; 
  }
  30% { 
    transform: translateY(0) scale(1.3); 
    opacity: 1; 
  }
  100% { 
    transform: translateY(-40rpx) scale(1); 
    opacity: 0; 
  }
}

/* VS标识 */
.vs-badge {
  font-size: 32rpx;
  font-weight: bold;
  color: white;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
  animation: vsPulse 1s ease-in-out infinite;
  z-index: 5;
}

@keyframes vsPulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.2); opacity: 1; }
}

/* 敌人 */
.battle-enemy {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 10;
  animation: enemyFloat 3s ease-in-out infinite;
}

.battle-enemy.hit {
  animation: enemyHit 0.5s ease-out;
}

.battle-enemy.defeated {
  animation: enemyDefeated 0.8s ease-out forwards;
}

.battle-enemy.attacking {
  animation: enemyAttack 0.4s ease-out;
}

@keyframes enemyFloat {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-8rpx) rotate(5deg); }
}

@keyframes enemyAttack {
  0% { transform: translateX(0) scale(1); }
  50% { transform: translateX(-60rpx) scale(1.1); }
  100% { transform: translateX(0) scale(1); }
}

@keyframes enemyHit {
  0%, 100% { transform: translateX(0); filter: brightness(1); }
  25% { transform: translateX(-10rpx); filter: brightness(2); }
  75% { transform: translateX(10rpx); filter: brightness(2); }
}

@keyframes enemyDefeated {
  0% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(1.2) rotate(180deg); opacity: 0.5; }
  100% { transform: scale(0) rotate(360deg); opacity: 0; }
}

.enemy-character {
  font-size: 80rpx;
  filter: drop-shadow(0 4rpx 8rpx rgba(0, 0, 0, 0.3));
}

/* BOSS皇冠 */
.boss-crown {
  position: absolute;
  top: -40rpx;
  font-size: 40rpx;
  animation: crownFloat 2s ease-in-out infinite;
  filter: drop-shadow(0 0 10rpx rgba(255, 215, 0, 0.8));
}

@keyframes crownFloat {
  0%, 100% { 
    transform: translateY(0) rotate(-5deg);
  }
  50% { 
    transform: translateY(-8rpx) rotate(5deg);
  }
}

.boss-character {
  font-size: 100rpx !important;
  animation: bossGlow 2s ease-in-out infinite;
}

@keyframes bossGlow {
  0%, 100% { 
    filter: drop-shadow(0 0 20rpx rgba(255, 215, 0, 0.8));
    transform: scale(1);
  }
  50% { 
    filter: drop-shadow(0 0 40rpx rgba(255, 215, 0, 1));
    transform: scale(1.1);
  }
}

.battle-enemy.boss {
  animation: bossShake 0.5s ease-in-out infinite;
}

@keyframes bossShake {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-5rpx) rotate(3deg); }
}

/* 敌人血量容器 */
.enemy-hp-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rpx;
  margin-bottom: 8rpx;
}

/* 敌人血条 */
.enemy-hp-bar {
  width: 120rpx;
  height: 12rpx;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 6rpx;
  overflow: hidden;
  border: 1rpx solid rgba(255, 255, 255, 0.2);
}

/* 敌人血量文字 */
.enemy-hp-text {
  font-size: 20rpx;
  color: #ffffff;
  font-weight: 600;
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.5);
}

/* 敌人信息容器 */
.enemy-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rpx;
  margin-top: 8rpx;
}

.enemy-name {
  padding: 4rpx 12rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20rpx;
  font-size: 14rpx;
  font-weight: bold;
  color: #f44336;
}

.enemy-level {
  padding: 2rpx 8rpx;
  background: rgba(255, 87, 34, 0.15);
  border: 1rpx solid rgba(255, 87, 34, 0.3);
  border-radius: 10rpx;
  font-size: 12rpx;
  font-weight: 600;
  color: #ff5722;
}

.boss-name {
  background: linear-gradient(90deg, #ffd700 0%, #ff8c00 100%) !important;
  color: white !important;
  font-size: 16rpx !important;
  box-shadow: 0 2rpx 8rpx rgba(255, 215, 0, 0.5);
}

.boss-level {
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 140, 0, 0.2) 100%) !important;
  border: 1rpx solid rgba(255, 215, 0, 0.5) !important;
  color: #ffd700 !important;
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
}

.boss-hp {
  width: 150rpx !important;
  height: 14rpx !important;
  box-shadow: 0 0 10rpx rgba(255, 215, 0, 0.5);
}

/* 战斗日志（限制2行）*/
.battle-log-container {
  min-height: 64rpx;
  max-height: 64rpx;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8rpx;
  padding: 6rpx 12rpx;
  margin-bottom: 12rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}

.battle-log-item {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 6rpx 10rpx;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6rpx;
  animation: logSlideIn 0.3s ease-out;
  transition: all 0.3s ease;
}

.log-enter {
  animation: logSlideIn 0.3s ease-out, logHighlight 0.5s ease-out;
}

@keyframes logSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes logHighlight {
  0% {
    background: rgba(255, 255, 255, 0.3);
  }
  100% {
    background: rgba(255, 255, 255, 0.1);
  }
}

.log-icon {
  font-size: 16rpx;
  flex-shrink: 0;
}

.log-text {
  font-size: 13rpx;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.4;
  flex: 1;
}

.log-text.log-boss {
  color: #ffd700;
  font-weight: bold;
}

.log-text.log-special {
  color: #4CAF50;
  font-weight: 500;
}

.log-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.log-empty-text {
  font-size: 12rpx;
  color: rgba(255, 255, 255, 0.5);
}

/* 敌人上方战斗效果 */
.enemy-battle-effects {
  position: absolute;
  top: -80rpx;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  pointer-events: none;
  width: 200rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.enemy-battle-effects .damage-text {
  font-size: 44rpx;
  font-weight: bold;
  color: #ff5722;
  text-shadow: 
    0 0 10rpx rgba(255, 87, 34, 0.8),
    2rpx 2rpx 4rpx rgba(0, 0, 0, 0.5);
  animation: damageFloatUp 0.6s ease-out forwards;
}

.enemy-battle-effects .damage-text.critical {
  font-size: 60rpx;
  color: #ff1744;
  text-shadow: 
    0 0 20rpx rgba(255, 23, 68, 1),
    0 0 40rpx rgba(255, 23, 68, 0.5),
    2rpx 2rpx 6rpx rgba(0, 0, 0, 0.8);
  animation: criticalDamageUp 0.7s ease-out forwards;
}

@keyframes damageFloatUp {
  0% { 
    transform: translateY(20rpx) scale(0.3); 
    opacity: 0; 
  }
  30% { 
    transform: translateY(0) scale(1.3); 
    opacity: 1; 
  }
  100% { 
    transform: translateY(-40rpx) scale(1); 
    opacity: 0; 
  }
}

@keyframes criticalDamageUp {
  0% { 
    transform: translateY(20rpx) scale(0.3) rotate(-10deg); 
    opacity: 0; 
  }
  20% { 
    transform: translateY(0) scale(1.6) rotate(5deg); 
    opacity: 1; 
  }
  50% { 
    transform: translateY(-20rpx) scale(1.4) rotate(-5deg); 
    opacity: 1; 
  }
  100% { 
    transform: translateY(-50rpx) scale(1) rotate(0deg); 
    opacity: 0; 
  }
}

.enemy-battle-effects .gold-reward-text {
  font-size: 36rpx;
  font-weight: bold;
  color: #ffd700;
  text-shadow: 
    0 0 10rpx rgba(255, 215, 0, 0.8),
    0 0 20rpx rgba(255, 215, 0, 0.5),
    2rpx 2rpx 4rpx rgba(0, 0, 0, 0.5);
  animation: goldFloatUp 1.2s ease-out forwards;
  margin-top: 10rpx;
}

@keyframes goldFloatUp {
  0% { 
    transform: translateY(30rpx) scale(0.5); 
    opacity: 0; 
  }
  15% { 
    opacity: 1; 
  }
  30% {
    transform: translateY(0) scale(1.3);
    opacity: 1;
  }
  100% { 
    transform: translateY(-80rpx) scale(1.5); 
    opacity: 0; 
  }
}

/* 战斗统计 */
.battle-stats {
  display: flex;
  gap: 12rpx;
  margin-bottom: 16rpx;
}

.stat-item-small {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12rpx;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8rpx;
}

.stat-icon {
  font-size: 20rpx;
  margin-bottom: 4rpx;
}

.stat-text {
  font-size: 14rpx;
  color: white;
  font-weight: 500;
}

/* 战斗控制 */
.battle-controls {
  display: flex;
  gap: 12rpx;
}

.control-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12rpx;
  cursor: pointer;
  transition: all 0.3s ease;
}

.control-btn:active {
  transform: scale(0.95);
}

.control-btn.attack-btn {
  background: linear-gradient(135deg, #f44336 0%, #e91e63 100%);
}

.control-btn.attack-btn .btn-icon,
.control-btn.attack-btn .btn-text {
  color: white;
}

.control-btn.active {
  background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
}

.control-btn.active .btn-icon,
.control-btn.active .btn-text {
  color: white;
}

.btn-icon {
  font-size: 28rpx;
  margin-bottom: 4rpx;
}

.btn-text {
  font-size: 14rpx;
  font-weight: bold;
  color: #2d3436;
}

/* 升级系统 */
.upgrade-section {
  background: white;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 16rpx;
}

.upgrade-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.section-title {
  font-size: 20rpx;
  font-weight: bold;
  color: #2d3436;
}

.upgrade-tabs {
  display: flex;
  gap: 8rpx;
}

.upgrade-tab {
  padding: 6rpx 16rpx;
  background: #f5f5f5;
  border-radius: 20rpx;
  cursor: pointer;
  transition: all 0.3s ease;
}

.upgrade-tab.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.upgrade-tab-text {
  font-size: 13rpx;
  color: #636e72;
  font-weight: 500;
}

.upgrade-tab.active .upgrade-tab-text {
  color: white;
}

.upgrade-section {
  background: white;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 16rpx;
  display: flex;
  flex-direction: column;
  max-height: 600rpx; /* 限制整个升级区域高度 */
}

.upgrade-list {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
  overflow-y: auto; /* 只滚动列表部分 */
  flex: 1;
  padding-right: 8rpx;
}

/* 滚动条样式 */
.upgrade-list::-webkit-scrollbar {
  width: 6rpx;
}

.upgrade-list::-webkit-scrollbar-thumb {
  background: rgba(102, 126, 234, 0.3);
  border-radius: 3rpx;
}

.upgrade-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 3rpx;
}

.upgrade-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
  border-radius: 12rpx;
  border: 2rpx solid rgba(102, 126, 234, 0.1);
}

.upgrade-info {
  display: flex;
  align-items: center;
  flex: 1;
}

.upgrade-icon {
  font-size: 32rpx;
  margin-right: 12rpx;
}

.upgrade-details {
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}

.upgrade-name {
  font-size: 16rpx;
  font-weight: bold;
  color: #2d3436;
}

.upgrade-desc {
  font-size: 12rpx;
  color: #636e72;
}

.upgrade-level {
  font-size: 12rpx;
  color: #667eea;
  font-weight: 500;
}

.upgrade-value-row {
  display: flex;
  align-items: center;
  gap: 8rpx;
  margin-top: 4rpx;
}

.upgrade-current-value {
  font-size: 13rpx;
  color: #2d3436;
  font-weight: 600;
  padding: 2rpx 8rpx;
  background: rgba(102, 126, 234, 0.1);
  border-radius: 8rpx;
}

.upgrade-next-value {
  font-size: 12rpx;
  color: #27ae60;
  font-weight: 600;
  padding: 2rpx 8rpx;
  background: rgba(39, 174, 96, 0.1);
  border-radius: 8rpx;
  display: flex;
  align-items: center;
}

.upgrade-action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8rpx;
}

.upgrade-cost {
  font-size: 14rpx;
  color: #f39c12;
  font-weight: bold;
}

.upgrade-cost.max-level {
  color: #27ae60;
}

.upgrade-btn {
  padding: 8rpx 20rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20rpx;
  cursor: pointer;
  transition: all 0.3s ease;
}

.upgrade-btn:active {
  transform: scale(0.95);
}

.upgrade-btn.disabled {
  background: #95a5a6;
  opacity: 0.5;
  pointer-events: none;
}

.upgrade-btn-text {
  font-size: 14rpx;
  font-weight: bold;
  color: white;
}

/* 金币统计卡片 */
.gold-stats-card {
  background: white;
  border-radius: 16rpx;
  padding: 20rpx;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12rpx 0;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
}

.stat-row:last-child {
  border-bottom: none;
}

.stat-label {
  font-size: 14rpx;
  color: #636e72;
}

.stat-value {
  font-size: 16rpx;
  font-weight: bold;
  color: #2d3436;
}

.stat-value.gold {
  font-size: 20rpx;
  color: #f39c12;
}

/* 宠物属性面板 */
.pet-upgrade-tip {
  display: flex;
  align-items: center;
  padding: 12rpx 16rpx;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  border-radius: 12rpx;
  margin-bottom: 12rpx;
}

.tip-icon {
  font-size: 20rpx;
  margin-right: 8rpx;
}

.tip-text {
  font-size: 13rpx;
  color: #667eea;
  font-weight: 500;
}

.pet-stat-item {
  display: flex;
  align-items: center;
  padding: 16rpx;
  background: #fafafa;
  border-radius: 12rpx;
  margin-bottom: 8rpx;
}

.stat-icon-wrapper {
  width: 48rpx;
  height: 48rpx;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.stat-icon {
  font-size: 24rpx;
}

.stat-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}

.stat-name {
  font-size: 15rpx;
  font-weight: bold;
  color: #2d3436;
}

.stat-desc {
  font-size: 12rpx;
  color: #95a5a6;
}

.stat-progress {
  display: flex;
  align-items: center;
  gap: 8rpx;
  margin-top: 4rpx;
}

.energy-bar, .mood-bar, .exp-bar-detail {
  flex: 1;
  height: 8rpx;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4rpx;
  overflow: hidden;
}

.energy-fill {
  height: 100%;
  background: linear-gradient(90deg, #3498db 0%, #2ecc71 100%);
  border-radius: 4rpx;
  transition: width 0.3s ease;
}

.mood-fill {
  height: 100%;
  background: linear-gradient(90deg, #f39c12 0%, #e74c3c 100%);
  border-radius: 4rpx;
  transition: width 0.3s ease;
}

.exp-fill-detail {
  height: 100%;
  background: linear-gradient(90deg, #ffd700 0%, #ffed4e 100%);
  border-radius: 4rpx;
  transition: width 0.3s ease;
  box-shadow: 0 0 4rpx rgba(255, 215, 0, 0.4);
}

.stat-value {
  font-size: 12rpx;
  font-weight: 500;
  color: #667eea;
  white-space: nowrap;
}
</style>
